Анимация при наведении на блок css

Анимация при наведение на блок с помощью css очень простая вещь. Нам будет достаточно применить псевдокласс hover и вот уже блок анимируется при наведении.

Но знать как сделать анимацию на css, это немного посложнее, но вас это не должно пугать. Давайте разбираться в том, как сделать анимацию.

Во-первых вам нужно знать, что анимация может применяться практически к любым html-объектам и тегам, а также к псевдоэлементам :before и :after. Практически все свойства CSS3 могут анимироваться. Посмотрите список анимируемых свойств.

Ключевые кадры анимации @keyframes

Анимирование блока на css начинается с ключевых кадров. Для того, чтобы задать ключевые кадры, мы используем свойство @keyframes. Кадры анимации определяют на каком шаге будут происходить определенные изменения. Для того, чтобы задавать кадры мы можем использовать слова «from» и «to», например:

@keyframes color {
 from {
  color:white; /*белый цвет*/
 }
 to {
  color:red; /*красный цвет*/
 }
}

или же мы можем указывать кадры в процентах. Это, кстати, даёт нам некоторое преимущество, так как мы можем более детально раскадрировать анимацию, в отличии от использования «from» и «to»:

@keyframes color {
 0% {
  color:white; /*белый цвет*/
 }
 50% {
  color:black /*черный цвет*/
 }
 100% {
  color:red; /*красный цвет*/
 }
}

Кстати, слово «color» после @keyframes — это название анимации, о котором мы поговорим сейчас более подробно.

Название анимации animation-name

Свойство animation-name задает, как вы уже поняли, имя анимации. Давать название анимации необходимо для того, чтобы определить и позже применить анимацию к объекту. Рекомендуется давать имя, отражающее суть анимации, например «move», что в переводе с английского означает движение. Таким образом мы понимаем, что анимация будет связанна с движением объекта. Название анимации может состоять из нескольких слов связанных между собой нижнем подчеркиванием или дефисом, например:

@keyframes move {
  /*body*/
}
@keyframes my-move {
  /*body*/
}
@keyframes my_move {
  /*body*/
}

Название может содержать в себе только:

• буквы (от a до z);
• цифры (0-9);
• нижнее подчеркивание (_);
• дефис (-).

Название анимации не может начинаться с цифры или двух дефисов.

Продолжительность анимации animation-duration

Свойство устанавливает продолжительность анимации, т.е. то время, которое отведено на выполнение всех кадров анимации, прописанных в свойстве @keyframes. Задается в секунда или миллисекундах.

div {animation-duration:2s}
div {animation-duration:0.2s}
div {animation-duration:.2s}
div {animation-duration:200ms}

Временная функция animation-timing-function

Данное свойство определяет изменение скорости во время анимации с помощью временных функций. Задается при помощи ключевых слов, таких как «ease», «ease-in», «ease-out», «ease-in-out», «linear» или кривых Бизье. Чтобы сгенерировать кривую Бизье, можно воспользоваться генератором кривых Бизье, вместо того, чтобы прописывать их вручную.

div {animation-timing-fuction: ease;}
div {animation-timing-fuction: cubic-bezier(1,.07,.05,1);}

Отдельно хотел бы поговорить о ступенчатой временной функции. Данная функция позволяет анимировать блок или элемент пошагово. Принимает два параметра: первый — количество шагов (целое положительное число), второй — указывает момент, в который начинается анимация. Здесь могут быть два значения «start» — анимация начинается в начале каждого шага, «end» — анимация начинается в конце каждого шага.

Задержка анимации animation-delay

Свойство animation-delay устанавливает время задержки анимации, т.е. через какое время начнется анимация. Значение указывается в секундах или миллисекундах. Пример работы данного свойство очень хорошо видно на примере ниже, когда сначала происходит сдвиг объекта, а затем его увеличение по ширине. Задержка анимации «увеличения» установлена на две секунды, так как анимация «движения» занимает две секунды.

div {animation-delay:2s;}
div {animation-delay:0.2s;}
div {animation-delay:.2s;}
div {animation-delay:200ms;}

Свойство animation-iteration-count

Данное свойство указывает количество воспроизведений анимации. Указывается целым положительным числом. Также может принимать значение «infinite» — бесконечное число повторений.

div {animation-iteration-count: 5; }
div {animation-iteration-count: 150; }
div {animation-iteration-count: infinite; }

Свойство animation-direction

Свойство задает направление повтора анимации. Данное свойство не имеет смысла если анимация проигрывается 1 раз.

Свойство animation-fill-mode

Данное свойство определяет порядок применения примененных стилей в @keyframes.

div {animation-fill-mode: both;}

Значение «none» — значение по умолчанию. Состояние элемента не меняется до начала анимации и после окончания анимации.

Значение «forwards» — Воспроизводит анимацию до последнего кадра по окончанию последнего повтора и не отматывает ее к первоначальному состоянию.

Значение «backwards» — Возвращает состояние элемента после загрузки страницы к первому кадру, даже если установлена задержка animation-delay, и оставляет его там, пока не начнется анимация.

Значение «both» — Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.

Краткая запись анимации

Если мы хотим использовать все вышеперечисленные свойства анимации мы можем прописать это так:

div {
 animation-name: name;
 animation-duration: 2s;
 animation-timing-function: ease-in;
 animation-delay: 0.5s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-fill-mode: both;
}

но это слишком неудобная и длинная запись, ее можно сократить:

div {animation: name 2s ease-in 0.5s infinite alternate both;}

Свойство animation-play-state

Свойство animation-play-state позволяет запустить анимацию или остановить ее. Для этого используются значения «paused» и «running».

div {
  animation-play-state: running;
  -webkit-animation-play-state: running;
}

Множественная анимация

Для одного элемента можно назначить несколько анимаций, перечислив их через запятую.