CSS анимация
Использование CSS-анимации для оживления HTML-страницы при помощи правила @keyframes и свойства animation.
Создание ключевых кадров с помощью правила @keyframes
Синтаксис @keyframes с двумя ключевыми кадрами выглядит следующим образом
@keyframes myAnimation_name {
from {
css-свойство: значение;
}
to {
css-свойство: значение;
}
}
Пример
@keyframes myAnime {
from {
color: #435673;
}
to {
color: #140783;
margin-left: 30px;
}
}
from - начальная точка, to - конечный результат
Синтаксис @keyframes с тремя и более ключевыми кадрами выглядит в процентном соотношении
@keyframes myAnimation_name {
0% {
css-свойство: значение;
}
55% {
css-свойство: значение;
}
100% {
css-свойство: значение;
}
}
Так же можно комбинировать и объединять кадры
@keyframes myAnimation_name {
from, 70% {
css-свойство: значение;
}
55% {
css-свойство: значение;
css-свойство: значение;
}
to, 20% {
css-свойство: значение;
}
}
Правило @keyframes создано, теперь его можно использовать в свойстве animation
Использование созданной анимации
Теперь мы можем обратиться к созданной анимации, используя свойство animation
div {
animation: название_анимации длительность скорость задержка повтор направление;
}
.myElement {
animation: myAnimation_name 2.5s linear 5s infinite alternate-reverse;
}
Пример CSS анимации
See the Pen CSS3-animation by Nikolay (@Only-to-top) on CodePen.
В развёрнутом виде анимация выглядит следующим образом
div {
animation-name: название анимации;
animation-duration: длительность;
animation-timing-function: скорость;
animation-delay: задержка;
animation-iteration-count: повтор;
animation-direction: направление;
}
.myElement {
animation-name: myAnimation_name;
animation-duration: 2.5s;
animation-timing-function: linear;
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 | Начинается с конца и продолжается в обратном направлении |
English | Russian |
---|---|
Keyframes | Ключевые кадры |
Duration | Продолжительность |
Timing-function | Временная функция |
Delay | Задержка |
Iteration-count | Счётчик итераций |
Direction | Направление |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.