Анимация при наведении на блок 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;
}
Множественная анимация
Для одного элемента можно назначить несколько анимаций, перечислив их через запятую.