Часто молодые веб-разработчики знают, что есть такое понятие, как CSS-анимация, и ищут примеры того, как это реализовывается. Анимация придает сайтам динамичность и живость. Не анимированные сайты потихоньку уходят в прошлое, так как современному пользователю нужно «движение».
Искать примеры готовой CSS-анимации — дело нехитрое. Есть множество ресурсов, где их можно «достать» и использовать в своих целях. Копипаст еще никто не отменял. Однако лучше самостоятельно разобраться, по каким принципам строится анимация при помощи CSS. В этом случае вы сможете самостоятельно разобрать скопированный пример «по косточкам» и адаптировать его под свой ресурс.
А второй момент — не весь код нужен в готовой анимации. Иногда CSS-код настолько нагружен «хламом», что хорошая чистка ему не помешает. Вот тут знания основ анимации и пригодятся.
CSS3-анимация
CSS3-анимация применима практически для всех HTML-элементов, включая псевдоэлементы «:before» и «:after». Однако нужно помнить одну вещь — каждый анимационный элемент является дополнительной нагрузкой для браузера, поэтому не нужно превышать разумное количество анимации, чтобы ваш веб-сайт загружался быстро, а не зависал от обилия анимации.
Ключевое слово «@keyframes»
CSS3-анимация базируется на ключевом слове «@keyframes». Все, что написано за таким ключевым словом, и является CSS-кодом, определяющим поведение анимационного эффекта. Объявляется оно по такому шаблону:
@keyframes <имя_анимации> {
список правил для анимации
}
Внутри списка анимационных правил можно указать, какая анимация на каком этапе будет показываться. Каждый отдельный этап может включать множество свойств и значений, определяющих анимацию.
Простой пример анимации CSS3. Допустим, у нас есть текстовый блок, которому мы хотим задать анимацию вида «пульсации» за счет изменения тени текста. Имя анимации «textShadow», тогда мы получим следующий CSS-код:
@keyframes textShadow {
from {text-shadow: 0 0 4px green;}
50% {text-shadow: 0 0 40px green;}
to {text-shadow: 0 0 4px green;}
}
Этапы включения определенного стиля анимации можно регламентировать словами «from...tо». Или регламентировать процентным соотношением «0%...25%...50%...100%», где слову «from» соответствует «0%», слову «to» — «100%», а между ними может находиться любое процентное выражение. Для удобства в примере выше мы показали комбинированный метод, что тоже можно применять.
Если с ключевым словом «@keyframes» записать несколько блоков анимации с одним и тем же именем, например «textShadow», тогда браузер вычислит только последний блок, а все остальные проигнорирует.
Для того чтобы анимация в блоке «@keyframes» сработала, ее нужно объявить в элементе, который мы хотим анимировать. То есть имя анимации должно присутствовать в элементе. Для этого к элементу нужно применить свойство «animation», где будет имя анимации и несколько аргументов для нее.
В нашем случае это могло бы выглядеть так:
.animationText {
font-size: 16px;
color: grey;
animation: textShadow 3s infinite ease-in-out;
}
Как видно, в свойстве «animation» мы объявили имя анимации, которое использовали в «@keyframes», продолжительность анимации 3 секунды, обозначили ее непрерывность аргументом «infinite» и указали функцию замедления аргументом «ease-in-out».
Свойство «animation»
Ключевое слово «@keyframes» и свойство «animation» всегда идут в паре. И чтобы анимация в CSS3 сработала, они оба должны быть записаны.
Чуть выше мы написали примеры и использовали свойство «animation» с несколькими аргументами. То есть «animation» — это общее свойство, которое включает в себя несколько других свойств. Например, есть общее свойство «padding», которое включает в себя:
padding-top;
padding-right;
padding-bottom;
padding-left.
Так и свойство «animation» состоит из нескольких основных частей.
Animation-name
Оно всегда стоит первым, потому что является самым главным. Без него анимация работать не будет, потому что благодаря имени анимации элементу определяется список анимационных свойств. Поэтому, если имя анимации в элементе и имя анимации после слова «@keyframe» не совпадают, тогда анимация не сработает.
Имя анимации чувствительно к регистру, поэтому «textShadow» и «textshadow» — это два разных имени. Рекомендуется применять название анимации, которое будет отражать суть анимации или суть элемента, к которому применяется анимация. В дальнейшем такой подход поможет идентифицировать и легче читать код.
Animation-duration
Это второй аргумент в свойстве «animation». Он определяет продолжительность анимационного цикла. Задать его можно в секундах (s) или в миллисекундах (ms). Можно указать несколько значений продолжительности анимации через запятую, если у элемента будет несколько разных анимаций. То есть в одном свойстве можно указать продолжительность для разной анимации.
Animation-iteration-count
Третий аргумент в нашем примере. Это свойство показывает количество циклов, которое будет выполнять анимация. Определяется двумя значениями:
infinite — показывает, что анимация будет проигрываться бесконечное количество раз;
числовое значение — указываете любое число, которое будет определять количество циклов анимации.
Если это свойство не указать, тогда анимация проиграет только один цикл. «1» — это значение по умолчанию.
Animation-timing-function
Четвертый аргумент в нашем свойстве. Показывает, как развивается анимация в течение анимационного цикла. Например:
ease — анимация медленно стартует, потом набирает разгон и замедляет ход к концу;
ease-in — медленно стартует и набирает ход к концу;
ease-out — быстро стартует и замедляет ход к концу;
ease-in-out — медленно стартует и медленно заканчивается;
cubic-bezier() — дает возможность устанавливать скорость воспроизведения анимации «вручную»;
и др.
Animation-direction
В нашем примере не указан этот аргумент. Регламентирует направление воспроизведения анимации. То есть здесь можно указать, чтобы анимация воспроизводилась в обратном порядке. По умолчанию значение этого свойства проигрывает анимацию в одном направлении. Если нужно обратное проигрывание, тогда указывается значение «reverse».
Animation-play-state
Это свойство у нас не указано. Оно определяет возможность временно приостановить анимацию до наступления какого-то события. Часто применяется совместно со скриптами JavaScript либо с состоянием «:hover», которое применяется для определения свойств при наведении курсора на элемент.
Значение для приостановки анимации — «paused». Важно отметить, что остановленная анимация начинает свое воспроизведение с того момента, на котором она остановилась, а не с самого начала.
Animation-delay
Это свойство регламентирует время задержки анимации перед ее началом. По умолчанию свойство определяет немедленный старт анимации. В качестве аргументов используется число, которое определяет время задержки в секундах (s) или миллисекундах (ms).
Заключение
Теперь вы знаете, как выстраивается анимация в CSS3, и сможете самостоятельно разобрать любые примеры в сети. Кстати, это очень удобный вариант изучения CSS, когда вы находите пример CSS-анимации в сети, а потом перед использованием изучаете его, чтобы понять, как он работает, а возможно, даже редактируете его для себя.
Если создаете анимацию самостоятельно, важно запомнить две вещи, чтобы она сработала:
в свойствах элемента, который вы хотите анимировать, обязательно нужно указать параметры «animation-name» и «animation-duration» — без них она не сработает;
«animation-name» и имя анимации в «@keyframes» должны совпадать, иначе анимация тоже не сработает.
Другое