CSS анимация
Использование CSS-анимации для оживления HTML-страницы при помощи правила @keyframes и свойства animation.
Создание ключевых кадров с помощью правила @keyframes
Синтаксис @keyframes с двумя ключевыми кадрами выглядит следующим образом:
@keyframes myAnimation_name {
from {
css-свойство: значение;
}
to {
css-свойство: значение;
}
}
Пример
@keyframes myAnime {
from {
color: gray;
}
to {
color: lightblue;
}
}
- from — начальная точка,
- to — конечный результат.
Синтаксис @keyframes с тремя и более ключевыми кадрами выглядит в процентном соотношении:
@keyframes myAnimation_name {
0% {
css-свойство1: значение1;
}
55% {
css-свойство2: значение2;
}
100% {
css-свойство3: значение3;
}
}
Так же можно комбинировать и объединять кадры
@keyframes myAnimation_name {
0%, 70% {
css-свойство1: значение1;
}
55% {
css-свойство2: значение2;
css-свойство3: значение3;
}
100%, 20% {
css-свойство4: значение4;
}
}
После создания правила @keyframes создано, теперь его можно использовать в свойстве animation.
Использование созданной анимации
Теперь мы можем обратиться к созданной анимации, используя свойство animation.
tag {
animation: название_анимации длительность скорость задержка повтор направление;
}
.myElement {
animation: myAnimation_name 2.5s ease-out 5s infinite alternate-reverse;
}
В развёрнутом виде анимация выглядит следующим образом:
.myElement {
animation-name: myAnimation_name;
animation-duration: 2.5s;
animation-timing-function: ease-out;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
Чтобы анимация начала работать достаточно двух значений: animation-name (название анимации) и animation-duration (её длительность). Остальные значения будут использованы по умолчанию.
Длительность анимации — animation-duration
Задаётся в секундах или миллисекундах (s / ms)
animation-duration: 13.5s
Скорость проигрывания анимации — animation-timing-function
ease | По умолчанию |
linear | Равномерная скорость |
ease-in | Медленный старт, быстрое завершение |
ease-out | Быстрый старт, медленное завершение |
ease-in-out | Медленный старт и медленное завершени |
Существуют и другие варианты проигрывания анимации, которые можно создать самому, используя функцию cubic-bezier(). Но в большинстве случаев хватает стандартных вариантов использования.
animation-timing-function: ease-in-out
Задержка до начала анимации — animation-delay
Задаётся в секундах или миллисекундах (s / ms). Значение по умолчанию — 0.
animation-delay: 6.5s
Повторение анимации — animation-iteration-count
Задаётся с помощью целых положительных чисел: 1 — одно повторение, 2 — два, и т.д. Значение по умолчанию — 1. Для бесконечного проигрывания анимации — infinite.
animation-iteration-count: 6
Направление для анимации — animation-direction
normal | По умолчанию |
reverse | Начинается с конца |
alternate | Начинается с начала и продолжается в обратном направлении |
alternate-reverse | Начинается с конца и продолжается в обратном направлении |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: