Другое

CSS-анимация: специфика, виды, правила создания и примеры

Lorem ipsum dolor

Часто молодые веб-разработчики знают, что есть такое понятие, как 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» должны совпадать, иначе анимация тоже не сработает.

Схожие статьи

Другое

Что такое Wh: что это за единица измерения, чему она равна

Что такое митап простыми словами: определение и перевод этого термина
Другое

Что такое митап простыми словами: определение и перевод этого термина

Int main C: для чего нужна функция main, прототип в функции Cи
Другое

Int main C: для чего нужна функция main, прототип в функции Cи

Pandas «read_CSV()» — фильтрация данных: описание, параметры, примеры
Другое

Pandas «read_CSV()» — фильтрация данных: описание, параметры, примеры

×