Другое

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

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

Подработка для программистов, которые только закончили учебу
Другое

Подработка для программистов, которые только закончили учебу

Другое

Как быстро ИИ может обрабатывать данные?

Как добавить в файл hosts строку, простой способ его изменить
Другое

Как добавить в файл hosts строку, простой способ его изменить

MachineLearning/Anomalous (машин лернинг): что это, зачем нужен
Другое

MachineLearning/Anomalous (машин лернинг): что это, зачем нужен

×