Как сделать анимацию сердца на CSS3

Привет! Представь, что тебе осталось жить.. всего неделю.. не день! Чем займёшься в оставшиеся дни? Попробуй представить. Пусть это реанимированное сердечко станет напоминанием о главной ценности. О жизни 🙂

Создавать наше сердце мы будем с помощью псевдоэлементов ::after и ::before.

::after — добавляет контент после указанного элемента с помощью свойства content

::before — вставляет контент перед указанным элементом, так же, посредством свойства content

Создаём сердце из фигур:

.heart {
  background-color: #ff2b58;
  display: inline-block;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg); // поворачиваем на -45 градусов
  position: absolute; 
  left: 45%; top: 45%; // смещаем позицию слева и сверху по 45%
  height: 50px; // квадрат
  width: 50px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: #ff2b58;
  border-radius: 50%; // квадрат со скругленными углами 50% = круг
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

Класс .heart

Для псевдоэлемента::before создаём квадрат height: 50px и width: 50px, добавляем скругление углов 50% и такой же для псевдоэлемента ::after. Добавляем абсолютное позиционирование и красный или как у меня розовый фон.

Добавляем анимацию

Инструментом реанимации станет правило @keyframes (имя произвольное), которое позволяет контролировать промежуточные этапы анимации путём создания ключевых кадров. У нас каждый шаг соответствует проценту от завершения периода времени:

@keyframes heartbeat {
  0% {
    transform: scale(1);    
  }
  20% {
    transform: scale(1.25) 
      translateX(5%) 
      translateY(5%);
  } 
  40% {
    transform: scale(1.5) 
      translateX(9%) 
      translateY(10%);
  }
}

Подробнее о свойствах

CSS свойство transform применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента). Допускается перечислять несколько функций в одном объявлении (разделённые пробелом).

Синтаксис CSS для transform:

transform:"none | transform-functions | initial | inherit";

/* Допускается перечислять несколько функций в одном объявлении */

transform:"transform-function transform-function transform-function";

scale(x,y) — определяет двухмерное преобразование путём масштабирования элемента по оси x и по оси y. Допускается использование одного значения, в этом случае элемент масштабируется с указанным значением как по оси x, так и по оси y. Например, значение scale(0.5) уменьшит элемент в 2 раза (как по оси x, так и по y).

translateX(x) / translateY(y) — определяет двухмерное преобразование путём сдвига элемента, используя только значение по оси x или y.

• 0% начало без трансформации
• 20% увеличиваем масштаб до 125%.
• 40% увеличиваем масштаб до 150%.

В остальные 60% времени возвращаем сердце в исходное состояние.

Запускаем анимацию с помощью свойства animation

.heart {
  animation: heartbeat 1s infinite; // infinite - анимация должна проигрываться бесконечно
  background-color: #ff2b58;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg); // повернули на -45 град. квадрат
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

CSS свойство animation позволяет задать все свойства анимации сразу, т.е. является короткой записью для следующих свойств:

• animation-name («keyframename /-s | none | initial | inherit»)
• animation-duration («time | initial | inherit»)
• animation-timing-function («linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start | end) | cubic-bezier(n,n,n,n) | initial | inherit»)
• animation-delay («time | initial | inherit»)
• animation-iteration-count («number | infinite | initial | inherit»)
• animation-direction («normal | reverse | alternate | alternate-reverse | initial | inherit»)
• animation-fill-mode («none | forwards | backwards | both | initial | inherit»)
• animation-play-state («paused | running | initial | inherit»)

CSS синтаксис для animation:

animation:"name duration timing-function delay iteration-count direction fill-mode play-state"

Смотрим на результат ре анимации:

See the Pen CSS Heart by Yuliya (@yvoloboy) on CodePen.

А эту запись сопровождает Whitney Houston I Will Always Love You

Вот таким получилось анимированное сердце 🙂 В процессе мы немного углубились в синтаксис, чтобы лучше узнать, за что отвечает то или иное свойство и таким образом понять, каким образом из нескольких фигур получается сердце и как оно при этом приводится в движение.

Кстати, регулярное прослушивание песен на английском и попытки их перевода, отлично сказываются на восприятии языка.