Css keyframes animation: animation-duration — CSS | MDN

HTML и CSS с примерами кода

Правило @keyframes управляет промежуточными шагами в последовательности анимации CSS, определяя стили для ключевых кадров последовательности анимации.

Это дает больший контроль над промежуточными этапами анимационной последовательности, чем переходы.

@-правила
Переходы и Анимации

Синтаксис

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  50% {
    margin-left: 50%;
    width: 200%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Значения

JavaScript может получить доступ к @keyframes правилам с помощью интерфейса объектной модели CSS CSSKeyframesRule.

Чтобы использовать ключевые кадры, создайте правило @keyframes с именем, которое затем используется свойством animation-name. Каждое правило @keyframes содержит список стилей селекторов ключевых кадров, которые определяют проценты вдоль анимации, когда происходит ключевой кадр, и блок, содержащий стили для этого ключевого кадра.

Вы можете перечислить проценты ключевого кадра в любом порядке; они будут обрабатываться в том порядке, в котором они должны произойти.

Действительные списки ключевых кадров

Если правило @keyframes не определяет начальные или конечные состояния анимации (то есть 0%/from и 100%/to, браузеры будут использовать существующие стили этого элемента для состояний начала и конца. Это можно использовать для анимации элемента из его начального состояния и обратно.

Свойства, которые не могут быть анимированы в правилах @keyframes, игнорируются, но поддерживаемые свойства все равно будут анимированы.

Обработка дубликатов

Если для данного имени существует несколько наборов ключевых кадров, используется последний, который встречается парсером. Правила @keyframes не каскадируются, поэтому анимации никогда не выводят ключевые кадры из нескольких наборов правил.

Если смещение времени анимации дублируется, используется последний ключевой кадр в правиле @keyframes для этого процента. Внутри правила @keyframes нет каскадирования, если несколько ключевых кадров определяют одинаковые процентные значения.

Когда свойства не заданы в некоторых ключевых кадрах

Свойства, которые не указаны в каждом ключевом кадре, по возможности интерполируются — свойства, которые невозможно интерполировать, удаляются из анимации. Например:

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

Здесь свойство top анимирует, используя 0%, 30% и 100% ключевые кадры, а анимации для left используют 0%, 68% и 100% ключевые кадры.

Когда ключевой кадр определяется несколько раз

Если ключевой кадр определен несколько раз, но не все затронутые свойства находятся в каждом ключевом кадре, учитываются только значения, указанные в последнем ключевом кадре. Например:

@keyframes identifier {
  0% {
    top: 0;
  }
  50% {
    top: 30px;
    left: 20px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 0;
  }
}

В этом примере на 50% ключевом кадре используется значение top: 10px, а все остальные значения в этом ключевом кадре игнорируются.

Каскадные ключевые кадры поддерживаются начиная с Firefox 14. В приведенном выше примере это означает, что в 50% ключевом кадре будет добавлено значение left: 20px. Это еще не определено в спецификации, но это обсуждается.

!important в ключевых кадрах

Объявления в ключевых кадрах с модификатором !important игнорируются:

@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /* ignored */
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

Спецификации

Поддержка браузерами

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

CSS анимация (CSS animation & @keyframes) // «Фрилансер по жизни»

easeпо умолчанию

ease-in

ease-out

ease-in-out

linear

steps(int,start|end)

cubic-bezier(x1,y1,x2,y2)

Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease;

}

/* те же ключевые кадры */

Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease-in;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease-in;

}

/* те же ключевые кадры */

Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease-out;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease-out;

}

/* те же ключевые кадры */

Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: ease-in-out;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s ease-in-out;

}

/* те же ключевые кадры */

Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: linear;

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s linear;

}

/* те же ключевые кадры */

Временная функция позволяет разбить анимацию на чёткое количество шагов указанных в int. Так же можно задать момент выполнения: Start – означает, что при начале анимации нужно сразу применить первое изменение. End — означало бы, что изменения нужно применять не в начале, а в конце каждого шага.

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: steps(2,start);

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s steps(2,start);

}

/* те же ключевые кадры */

Позволяет вручную установить значения (положительные и отрицательные) для кривой ускорения и создать свою собственную анимацию.

Пользовательские функции cubic Bézier с сайта easings.net

CSS код:

/* селектор */

.animation__circle{

width: 100px;
height: 100px;
border-radius: 50%;
background-color: #5e5373;
position: relative;
animation-name: circle;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55);

}

/* ключевые кадры */

@keyframes circle{

0%{
left: 0%;
}
50%{
border-radius: 0%;
}
100%{
left: 50%;
}

}

Или (универсальная запись):

/* селектор */

.animation__circle{

/* все те же стили селектора */
animation: circle 1s cubic-bezier(0.68,-0.55,0.265,1.55);

}

/* те же ключевые кадры */

CSS свойство @keyframes

Правило @keyframes устанавливает ключевые кадры при анимации элемента.

Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к нему в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

Самый простой вариант, когда есть только два ключевых кадра — исходное и конечное состояние. Например:

@keyframes box {
    from { left: 0; }
    to { left: 300px; }
}

Здесь набор ключевых кадров имеет имя box, которое в последствии будет использовано в свойстве animation. В наборе определяется, что элемент будет изменять значение свойства left от 0 до 300 пикселей. Вместо ключевых слов from и to можно использовать, соответственно, 0% и 100%.

Ключевые кадры не обязательно должны начинаться с 0% и заканчиваться 100%. В этом случае анимация будет происходить не сразу.

CSS синтаксис

@keyframes переменная {селектор-ключевого-кадра {css-стили;}}

Возможные значения

Пример использования

Заставим элемент понемногу сдвигаться вниз на 200px

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
     from {top: 0px;}
     to {top: 200px;}
} 

/* Стандартный синтаксис */ 
@keyframes mymove {
     from {top: 0px;}
     to {top: 200px;}
}

Простая CSS анимация с помощью @keyframes

Как создать простую анимацию на чистом CSS и не использовать JS

От автора: CSS переходы и трансформации отлично подходят для создания визуального взаимодействия на основе изменений состояния. Чтобы лучше контролировать происходящее на экране, можно воспользоваться свойством CSS анимации для создания простой анимации на @keyframes. У данной техники широкий спектр применения в дизайне, с ее помощью можно создавать умопомрачительные загрузчики, интерактивные интерфейсы, эффекты и полноэкранные истории. В этом уроке вы узнаете, как применять ваши знания о CSS переходах, чтобы быстро освоить анимацию, а также как с помощью @keyframes применять различные стили к элементу в разные промежутки времени. Пример примитивной работы анимации можно наблюдать у меня в логотипе (только десктоп)

@keyframes

CSS keyframes позволяет производить изменения постоянно и автоматически, а не только в ответ на события мыши, как в transition. С помощью кейфреймов можно менять CSS стили для заданного селектора в любой точке в момент смены состояния или события, определенного через JQuery (например, скролинг). Данное правило используется в паре со свойством animation, с помощью которого можно задать duration, timing function, delay и direction. Свойства типа transform, если они входят в анимацию, объявляются внутри правила @keyframes.

Для начала каждое правило @keyframe должно иметь уникальное имя:

	
@keyframes animation-name{ }

Это имя используется в стилях элемента в свойстве animation:

.element { 
 animation: animation-name; 
}

В кейфрейме задаются правила, выраженные в процентах. Проценты представляют собой точки вдоль временной линии анимации, внутри которых задаются стили для рендеринга на элементе:

 @keyframes animation-name { 
  0% { 
 color: pink; 
  } 
  50% { 
 color: yellow; 
  } 
  100% {
 color: blue;
 }
}

Пример применения этого простого правила к фоновому цвету для изменения body:

body {
  animation: change-background 4s ease infinite;
}

Смотреть ДЕМО

CSS animation generator: 15 лучших инструментов CSS3-анимации

Создание сложной анимации иногда может превратиться в трудоемкий процесс, и здесь пригодятся библиотеки и генераторы анимации. В этой статье приводится перечень лучших инструментов для создания анимации CSS3 (CSS animation generator).

Magic CSS3 Animations — это пакет CSS3-анимаций со спецэффектами, которые вы можете свободно использовать для любых веб-проектов. Просто включите стиль CSS magic.css или минимизированную версию magic.min.css.

CSS3 Animation Cheat Sheet представляет собой набор предустановленной plug-and-play анимации для веб-проектов. Для его использования нужно добавить стили на сайт и применить подготовленные классы CSS к элементам, которые вы хотите анимировать. CSS3 Animation Cheat Sheet использует правило @keyframes и работает во всех последних версиях браузеров (в том числе в IE 10).

CSS3 Keyframes Animation Generator представляет собой онлайн-инструмент, который позволяет создавать анимацию с помощью правила @keyframes.

Включает в себя многие эффекты CSS. Эффекты рассортированы по нескольким категориям (магия, перспектива, вращение, мерцание, статика, слайды, CSS3 анимация при наведении), и все они довольно красивые. Каждый из них имеет свои собственные классы. Самый простой способ применить их — добавить эти классы к целевым элементам через JavaScript.

Animate.css предоставляет набор кросс-браузерных эффектов CSS3-анимации. Эффекты могут использоваться для привлечения внимания, создания анимации на основе появления и исчезновения элементов.

Это JavaScript-библиотека для создания динамической анимации. Просто добавьте компонент и выберите пресет. После этого вы можете получить короткий URL-адрес или экспортировать анимацию CSS3 из примеров.

Hover.CSS — полезная коллекция эффектов на CSS3, которые могут применяться для призыва к действию, кнопкам, логотипам, специальным изображениям и так далее. Для использования коллекции достаточно скопировать и вставить код эффекта в CSS или разместить ссылку на его файл стилей.

AniJS — это декларативная библиотека для создания CSS-анимации, которая позволяет ускорить и обогатить разработку. Она полностью документирована и проста в использовании.

ProgressJs — это JavaScript и CSS3 библиотека, которая помогает разработчикам создавать и управлять индикаторами загрузки (прогресс-барами). Вы можете создать собственный шаблон для прогресс-бара или легко настроить готовый.

Keyframer — это удобный инструмент, который поможет вам создать CSS3 анимацию. Кeyframer довольно прост в использовании. Чтобы добавить ключевой кадр, вам нужно только кликнуть по шкале времени, а затем нажать на круглую кнопку, чтобы применить CSS-стили для анимации. Или кнопку с крестиком, чтобы удалить текущий кадр.

Инструмент для простого создания CSS3-анимации. Нужно настроить анимацию с помощью графика, изменить ее, получить сгенерированный CSS-код и все готово!

CSSketch — это Sketch 3 плагин, который позволяет быстро изменять дизайн, вкладывая таблицы стилей. Он поддерживает язык стилей {less}. Благодаря этому вы сможете использовать в таблице стилей функции и переменные. CSSketch — это программное обеспечение с полностью открытым исходным кодом, так что вы можете внести свой вклад в его развитие.

JQuery-плагин для создания анимированной подсветки и CSS3 анимации фона. Вы можете настроить анимацию (скорость и размер), эффект (цвет, прозрачность и размытие) и задать конкретную продолжительность или отключить таймер полностью.

Это средство для тестирования отказоустойчивости (постепенной деградации) кода CSS3. С его помощью вы сможете увидеть, как веб-страница будет отображаться в IE 6-8 версии.

GFX — это библиотека 3D CSS3 анимации, которая расширяет JQuery несколькими полезными функциями для программного создания CSS3 переходов, которые управляются с помощью метода setTimeout.

Данная публикация является переводом статьи «15 Best CSS3 Animation Tools for Developers» , подготовленная редакцией проекта.

animation-direction — CSS: Cascading Style Sheets

Свойство CSS animation-direction определяет, должна ли анимация воспроизводиться вперед, назад или попеременно назад и вперед между воспроизведением последовательности вперед и назад.

Часто удобно использовать сокращенное свойство animation , чтобы установить сразу все свойства анимации.

 
направление анимации: нормальное;
направление анимации: обратное;
направление анимации: альтернативное;
направление анимации: альтернативно-обратное;


направление анимации: нормальное, обратное;
направление анимации: альтернативное, обратное, нормальное;


направление анимации: наследование;
анимация-направление: начальная;
направление анимации: вернуться;
направление анимации: не установлено;
  

Значения

нормальные

Анимация воспроизводится вперед каждый цикл.Другими словами, каждый раз, когда анимация циклически повторяется, анимация сбрасывается в начальное состояние и начинается заново. Это значение по умолчанию.

реверс

Анимация воспроизводится на назад по каждый цикл. Другими словами, каждый раз, когда анимация циклически повторяется, анимация сбрасывается до конечного состояния и начинается заново. Шаги анимации выполняются в обратном направлении, и функции синхронизации также меняются местами. Например, временная функция для упрощения ввода становится для упрощенного ввода .

запасной

Анимация меняет направление на противоположное каждый цикл, при этом первая итерация воспроизводится вперед . Счетчик, определяющий, четный или нечетный цикл, начинается с единицы.

альтернативно-реверсивный

Анимация меняет направление на противоположное каждый цикл, при этом первая итерация воспроизводится назад . Счетчик, определяющий, четный или нечетный цикл, начинается с единицы.

Примечание: Когда вы указываете несколько значений, разделенных запятыми, в свойстве animation- * , они будут назначены анимациям, указанным в свойстве animation-name , по-разному в зависимости от их количества. Для получения дополнительной информации см. Установка нескольких значений свойств анимации.

Анимация воспроизводится в обратном порядке

HTML

CSS

  .box {
  цвет фона: rebeccapurple;
  радиус границы: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  имя-анимации: повернуть;
  продолжительность анимации: 0.7 с;
  направление анимации: обратное;
}

@keyframes rotate {
  0% {
    преобразовать: повернуть (0);
  }
  100% {
    преобразовать: повернуть (360 градусов);
  }
}
  

См. Примеры анимации CSS.

Таблицы BCD загружаются только в браузере

CSS @keyframes Правило

Пример

Сделать постепенное перемещение элемента на 200 пикселей вниз:

@keyframes mymove
{
от {top: 0px;}
на {top: 200px;}
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Правило @keyframes определяет код анимации.

Анимация создается путем постепенного перехода от одного набора стилей CSS к другому.

Во время анимации можно многократно менять набор стилей CSS.

Укажите, когда произойдет изменение стиля, в процентах или с помощью ключевых слов «from» и
«к», что означает 0% и 100%. 0% — это начало анимации, 100% — когда анимация завершена.

Совет: Для лучшей поддержки браузером вы всегда должны определять как селекторы 0%, так и селекторы 100%.

Примечание: Используйте свойства анимации для управления внешним видом анимации, а также для привязки анимации к селекторам.

Примечание: Правило! Important игнорируется в ключевом кадре (см. Последний пример на этой странице).

Поддержка браузера

Цифры в таблице указывают первую версию браузера, полностью поддерживающую
правило.

Числа, за которыми следуют -webkit-, -moz- или -o- указывают первую версию, которая работала с префиксом.

Синтаксис CSS

@keyframes animationname { keyframes-selector { css-styles;} }

Значения свойств

Другие примеры

Пример

Добавить несколько селекторов ключевых кадров в одну анимацию:

@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}

Попробуй сам »

Пример

Изменение множества стилей CSS в одной анимации:

@keyframes mymove
{
0% {top: 0px; фон: красный; width: 100px;}
100% {top: 200px; фон: желтый; width: 300px;}
}

Попробуй сам »

Пример

Множество селекторов ключевых кадров с множеством стилей CSS:

@keyframes mymove
{
0% {top: 0px; слева: 0px; фон: красный;}
25% {верх: 0px; слева: 100 пикселей; фон: синий;}
50% {верх: 100 пикселей; слева: 100 пикселей; фон: желтый;}
75% {top: 100px; слева: 0px; фон: зеленый;}
100% {top: 0px; слева: 0px; фон: красный;}
}

Попробуй сам »

Пример

Примечание: Правило! Important игнорируется в ключевом кадре:

@keyframes myexample
{
from {top: 0px;}
50% {top: 100px! important;} / * игнорируется
* /
на {top: 200px;}
}

Попробуй сам »

связанные страницы

Учебное пособие по CSS: Анимация CSS

Интерактивное руководство по анимации ключевых кадров CSS с @keyframes

Анимации ключевых кадров CSS — это потрясающе .Это один из самых мощных и универсальных инструментов CSS, и мы можем использовать их для самых разных изящных вещей.

Но их также часто неправильно понимают. Они немного странные, и если вы не понимаете этих причуд, их использование может быть довольно неприятным.

В этом уроке мы углубимся в ключевые кадры CSS. Мы разберемся, как они работают, и посмотрим, как с их помощью создать довольно шикарную анимацию. ✨

Целевая аудитория

Это руководство написано для разработчиков JavaScript, которые пытаются освоить CSS.Но он должен подходить всем разработчикам, знакомым с основами HTML / CSS.

Если вы достаточно продвинуты в CSS, вы, вероятно, знаете большую часть того, что мы рассматриваем, но я делюсь некоторыми довольно интересными и непонятными вещами в конце этого поста. 😄

В этом руководстве мы опираемся на знания, полученные в «Интерактивном руководстве по переходам CSS».

Основная идея анимации ключевого кадра CSS состоит в том, что она будет интерполировать между различными фрагментами CSS.

Например, здесь мы определяем анимацию по ключевым кадрам, которая будет плавно изменять горизонтальное положение элемента с -100% до 0% :

 
 Каждому оператору  @keyframes  нужно имя! В данном случае мы назвали его  выдвижным .Вы можете думать об этом как о глобальной переменной. * 
 
 Анимация по ключевым кадрам должна быть общей и многоразовой. Мы можем применить их к конкретным селекторам с помощью свойства  animation : 
 
 (Чтобы повторно запустить анимацию, обновите панель «Результат», щелкнув значок.) 
 
 Как и в случае свойства  transition , требуется  animation . продолжительность. Здесь мы сказали, что анимация должна длиться 1 секунду (1000 мс). 
 
 Браузер будет  интерполировать  объявлений в наших  из блоков  и  до  в течение указанного времени.Это происходит немедленно, как только свойство установлено. 
 
 Мы можем анимировать несколько свойств в одном объявлении анимации. Вот более интересный пример, который изменяет несколько свойств: 
 
 В «Интерактивном руководстве по переходам CSS» мы узнали все о различных функциях синхронизации, встроенных в CSS. 
 
 У нас есть доступ к той же библиотеке функций синхронизации для нашей анимации по ключевым кадрам. И, как и в случае , переход , значение по умолчанию  легкость .
 
 Мы можем переопределить его с помощью свойства  animation-time-function  property: 
 
 По умолчанию анимация ключевых кадров будет запускаться только один раз, но мы можем контролировать это с помощью свойства  animation-iteration-count  property: 
 
 Это довольно редко чтобы указать такое целое число, но есть одно специальное значение, которое может пригодиться:  бесконечное . 
 
 Например, мы можем использовать его для создания загрузочного счетчика: 
 
 Обратите внимание, что для счетчиков мы обычно хотим использовать линейную функцию синхронизации  , чтобы движение было постоянным (хотя это несколько субъективно — попробуйте изменить его и посмотрите, что вы думаете!).
 
 Помимо ключевых слов  от  и  до , мы также можем использовать проценты. Это позволяет нам добавить более двух шагов: 
 
 Проценты относятся к прогрессу анимации.  из  действительно просто синтаксический сахар? для  0% . А от  до  — сахар, так как  100% . 
 
 Важно отметить, что  функция синхронизации применяется к каждому этапу . У нас нет ни одной легкости для всей анимации. 
 
 На этой игровой площадке оба спиннера совершают 1 полный оборот за 2 секунды.Но  multi-step-spin  разбивает его на 4 отдельных шага, и к каждому шагу применяется временная функция: 
 
 К сожалению, мы не можем контролировать это поведение с помощью анимации ключевых кадров CSS, хотя  можно настроить с помощью веб-анимации. API. Если вы окажетесь в ситуации, когда пошаговое смягчение проблематично, я предлагаю проверить это! 
 
 Предположим, что мы хотим, чтобы элемент «дышал», надуваясь и сдуваясь. 
 
 Мы могли бы настроить его как трехэтапную анимацию: 
 
 Он проводит первую половину продолжительности, увеличиваясь до 1.В 5 раз больше размера по умолчанию. Как только он достигает этого пика, он тратит вторую половину, сокращаясь до 1x. 
 
 Это работает, но есть более элегантный способ добиться того же эффекта. Мы можем использовать свойство  animation-direction : 
 
  animation-direction  управляет порядком последовательности. Значение по умолчанию — , нормальное, , которое изменяется от 0% до 100% в течение указанного периода. 
 
 Мы также можем установить  реверс . Это приведет к воспроизведению анимации в обратном направлении, от 100% до 0%.
 
 Интересная часть, однако, заключается в том, что мы можем установить его на  альтернативный , который меняет значение между  нормальным  и  обратным  на последующих итерациях. 
 
 Вместо одной большой анимации, которая растет и сжимается, мы устанавливаем нашу анимацию на рост, а затем отменим ее на следующей итерации, заставляя ее сжиматься. 
  Половина длительности  
 Изначально анимация «дыхания» длилась 4 секунды. Однако, когда мы перешли на альтернативную стратегию, мы сократили продолжительность вдвое, до 2 секунд.
 
 Это потому, что  каждая итерация выполняет только половину работы . Всегда требовалось 2 секунды для роста и 2 секунды для сжатия. Раньше у нас была одинарная 4-секундная анимация. Теперь у нас есть 2-секундная анимация, которая требует 2 итераций для завершения полного цикла. 
 
 В этом уроке мы рассмотрели множество свойств анимации, и нам пришлось много печатать! 
 
 К счастью, как и в случае перехода  , мы можем использовать сокращение  animation  для объединения всех этих свойств.
 
 Приведенную выше анимацию можно переписать: 
 
 
 Вот и хорошие новости:  порядок не имеет значения.  По большей части вы можете перебрасывать эти свойства в любом порядке. Вам не нужно запоминать конкретную последовательность. 
 
 Есть исключение:  animation-delay , свойство, о котором мы поговорим позже, должно быть после длительности, поскольку оба свойства принимают один и тот же тип значения (миллисекунды / секунды). 
 
 По этой причине я предпочитаю исключить задержку из сокращений: 
 
 
 Вероятно, самый запутанный аспект анимации по ключевым кадрам — это  режимов заливки .Они — самое большое препятствие на нашем пути к уверенности в ключевых кадрах. 
 
 Начнем с проблемы. 
 
 Мы хотим, чтобы наш элемент исчез. Сама анимация работает нормально, но когда она закончена, элемент снова появляется: 
 
 Если бы мы изобразили непрозрачность элемента с течением времени, это выглядело бы примерно так: 
 
 Почему элемент возвращается к полной видимости? Что ж, объявления в блоках  от  и  до  применяют только , когда анимация выполняется .
 
 По истечении 1000 мс анимация упаковывается и отправляется в путь. Объявления в блоке от  до  исчезают, оставляя нашему элементу те объявления CSS, которые были определены в другом месте. Поскольку мы не устанавливали  непрозрачности  для этого элемента где-либо еще, он возвращается к своему значению по умолчанию ( 1 ). 
 
 Один из способов решить эту проблему — добавить объявление  opacity  в селектор  .box : 
 
 Во время анимации объявления в операторе  @keyframes  имеют приоритет над объявлением непрозрачности в .коробка  селектор. Однако, как только анимация завершается, это объявление срабатывает и сохраняет коробку скрытой. 
  Специфика?  
 В CSS конфликты разрешаются на основе «специфичности» селектора. Селектор идентификатора ( # login-form ) выиграет битву с классом ( .thing ). 
 
 А как насчет анимации по ключевым кадрам? В чем их специфика? 
 
 Оказывается, специфичность — не лучший способ думать об этом; вместо этого нам нужно подумать о  источниках каскада. 
 Показать еще 
 Итак, мы можем обновить наш CSS, чтобы свойства элемента соответствовали блокам с  по , но действительно ли это лучший способ? 
 
 
 Ссылка на этот заголовок 
 Заполнение вперед  
 Вместо того, чтобы полагаться на резервные объявления, давайте рассмотрим другой подход, используя  animation-fill-mode : 
 
  animation-fill-mode  позволяет нам сохранить окончательное значение из анимация,  вперед по времени . 
 
 «нападающие» — очень запутанное название, но, надеюсь, увидев его на этом графике, оно станет немного понятнее! 
 
 Когда анимация закончится,  animation-fill-mode: forward  скопирует / вставит объявления в последний блок, сохраняя их вперед во времени.
 
 
 Ссылка на этот заголовок 
 Заполнение назад  
 Мы не всегда хотим, чтобы наша анимация запускалась немедленно! Как и в случае с переходом  , мы можем указать задержку с помощью свойства  animation-delay . 
 
 К сожалению, мы сталкиваемся с аналогичной проблемой: 
 
 В первые полсекунды элемент полностью виден! 
 
 CSS в блоках  от  и  до  применяется только во время выполнения анимации. К сожалению, период  задержки анимации  не учитывается.Таким образом, в первые полсекунды создается впечатление, что CSS в блоке  из  не существует. 
 
  animation-fill-mode  имеет другое значение, которое может нам здесь помочь:  назад . Это применит CSS из первого блока  назад во времени . 
 
 «Вперед» и «назад» сбивают с толку, но вот аналогия, которая может помочь: представьте, если бы мы записали сеанс пользователя с момента загрузки страницы. Мы могли прокручивать видео вперед и назад.Мы можем прокручивать назад, до начала анимации, или вперед, после того, как анимация закончилась. 
 
 Что, если мы хотим сохранить анимацию вперед на  и  назад? Мы можем использовать третье значение,  и , которое сохраняется в обоих направлениях: 
 
 Лично я хочу, чтобы  и  были значением по умолчанию. Это намного более интуитивно понятно! Хотя это  может сделать  немного сложнее понять, где было установлено конкретное значение CSS. 
 
 Как и все обсуждаемые нами свойства анимации, его можно добавить к  анимации  сокращенный салат: 
 
 
 Анимации по ключевым кадрам сами по себе достаточно хороши, но когда мы смешиваем их с переменными CSS (также называемые настраиваемыми свойствами CSS ), все становится ⚡️ следующего уровня ⚡️.
 
 Предположим, что мы хотим создать анимацию прыгающего мяча, используя все, что мы узнали в этом уроке: 
  Кубический Безье?  
 Чтобы сделать анимацию отскока немного более реалистичной, я использую настраиваемую функцию синхронизации, используя  cubic-bezier . 
 
 Я скоро опубликую в блоге сообщение о магии кривых Безье — подпишитесь на мою рассылку, если вы хотите получать уведомления, когда она будет опубликована! 😄 
 
 CSS-анимация должна быть универсальной и многоразовой, но эта анимация всегда вызывает отскок элемента на 20 пикселей.Разве не было бы здорово, если бы разные элементы могли обеспечивать разную «высоту отскока»? 
 
 С помощью переменных CSS мы можем сделать именно это: 
 
 Наша анимация  @keyframes  была обновлена ​​так, что вместо отскока до  -20px  она получает доступ к значению свойства  --bounce-offset . И поскольку это свойство имеет разное значение в каждом поле, каждое из них имеет разное значение. 
 
 Эта стратегия позволяет нам создавать многоразовые настраиваемые анимации по ключевым кадрам.Думайте об этом как о подпорке для компонента React! 
  Полученные значения с помощью calc  
 Итак, в приведенном выше примере меня кое-что беспокоит. 
 
 С функцией  translateY  положительные значения перемещают элемент вниз, отрицательные значения перемещают элемент вверх. Мы хотим переместить элемент вверх, поэтому мы должны использовать отрицательное значение. 
 
 Но это деталь реализации  . Когда я хочу применить эту анимацию, мне кажется странным, что мне нужно использовать отрицательное значение. 
 
 Переменные CSS работают лучше всего, когда они семантические.Вместо установки  --bounce-offset  на отрицательное значение, я бы предпочел сделать это: 
 
 
 Используя  calc , мы можем  получить истинное значение  из предоставленного значения в пределах нашего  @keyframes  at-rule: 
 
 
 Мы определяем эту анимацию по ключевым кадрам только один раз, но мы, вероятно, будем использовать ее много раз. Стоит оптимизировать под «потребительскую» сторону вещей, чтобы сделать его максимально приятным в использовании, даже если это немного усложняет определение. 
 
  calc  позволяет нам создавать идеальные API для нашей анимации по ключевым кадрам.💯 
 
 Когда я создавал пару последних демонстраций, я понял, насколько сильно изменился CSS за последние несколько лет! 
 
 Это стало  невероятным языком , выразительным, гибким и мощным. Я люблю писать CSS. 
 
 И тем не менее, у очень многих интерфейсных разработчиков  очень разные  отношения к языку. Я разговаривал с сотнями разработчиков JavaScript, которые находят CSS разочаровывающим и запутанным. Иногда один и тот же CSS ведет себя совершенно по-разному! Это кажется таким непоследовательным.
 
 У меня есть теория на этот счет: в отличие от JS, большая часть CSS — это  неявно,  и скрыто. Недостаточно знать  свойств ; вам нужно знать принципы ,  руководящие ими. 
 
 Я провел последний год, работая полный рабочий день над курсом, который поможет преподавать CSS на более глубоком, более фундаментальном уровне. Если вы нашли этот пост в блоге полезным,  вам понравится курс . 
 
 Это называется CSS для разработчиков JavaScript, и он только что был выпущен для широкой публики.Вы можете узнать больше на css-for-js.dev. 
 
 A Краткое введение с примерами 
 
 CSS — это каскадные таблицы стилей. Это язык таблиц стилей, который используется для описания внешнего вида и форматирования документа, написанного на языке разметки. Он предоставляет дополнительную функцию HTML, что делает его очень полезным. Обычно он используется с HTML для изменения стиля веб-страниц и пользовательских интерфейсов. В этой статье мы попытаемся понять важную часть CSS-анимации — ключевые кадры.
 
 Что такое ключевые кадры CSS? 
 
 В CSS ключевые кадры используются для анимации. Это дает вам больше контроля над анимацией, которую вы хотите воспроизвести. Анимация создается путем постепенного перехода от одного стиля к другому. Вы можете изменять стили CSS сколько угодно раз. 
 
 БЕСПЛАТНЫЙ тренинг по сертификации Java 
 Изучите Java от А до Я, как никогда раньше
 
 Синтаксис: 
 
 @keyframes [имя] {
 
 из {
 
 [стили]; 
 
} 
 С 
 по {
 
 [стили]; 
 
} 
 
 
 Значение [name] определяет имя анимации.Вы можете называть его как хотите. 
 
 Значение [стили] определяет свойства стиля CSS. 
 
 
 Имейте в виду, что на них нет переключателей. Они находятся в корне страницы CSS. 
 
 Функции синхронизации ключевых кадров 
 
 Функция синхронизации используется для управления скоростью анимации. Для лучшего понимания мы можем использовать следующие значения: 
 
 
 Линейный: означает, что переход будет постоянным от начала до конца. 
 
 Легкость: это означает, что анимация будет начинаться медленно, а затем по прошествии некоторого времени скорость увеличится, а до конца скорость снова замедлится.
 
 Ease-in: Это очень похоже на легкость, но анимация заканчивается быстро. 
 
 Легкость: очень похожа на легкость. Единственная разница в том, что запускается быстро. 
 
 
 Ключевые кадры CSS, пример 1 
 
 Давайте посмотрим на базовый пример, чтобы понять, как работают ключевые кадры. 
 
 
 
 
 
 Здесь мы создали коробку высотой и шириной 200 пикселей. Цвет коробки красный. Создается ключевой кадр с именем «myframes», который увеличит высоту поля до 500 пикселей.
 
 Имя анимации определяет имя анимации, определенной @keyframes, которая должна быть применена к выбранному элементу. 
 
 Продолжительность анимации указывает, сколько секунд или миллисекунд требуется анимации для завершения одного цикла анимации. 
 
 Функция синхронизации определяет, как будет развиваться анимация в течение каждого цикла, то есть функции замедления. 
 
 Счетчик итераций указывает, сколько раз цикл анимации должен быть воспроизведен перед остановкой.
 
 
 
 Ключевые кадры CSS, пример 2 
 
 В этом примере. мы увидим еще один простой способ написать ключевые кадры с несколькими объявлениями стилей. 
 
 
 
 
 
 Full Stack Java Developer Course 
 The Gateway to Master Web DevelopmentExplore курс
 
 Ключевые кадры CSS, пример 3 
 
 В этом примере мы увидим несколько ключевых кадров с несколькими объявлениями стилей. 
 
 
 
 
 
 Объединить преобразование и ключевые кадры 
 
 В этом примере мы объединили ключевые кадры со свойством преобразования, чтобы создать вращающийся прямоугольник.
 
 
 
 
 
 Получите навыки работы с HTML5 и CSS3 с помощью магистерской программы для разработчиков Java Full Stack. Нажмите, чтобы узнать подробности программы! 
 
 Заключение 
 
 На этом мы подошли к концу статьи о ключевых кадрах CSS. Мы обсудили несколько примеров и свойства анимации, чтобы понять работу ключевых кадров. Работая с различными ключевыми кадрами и свойствами анимации, вы сможете лучше понять концепции. 
 
 Если у вас есть какие-либо вопросы или отзывы относительно нашей статьи о ключевых кадрах CSS, дайте нам знать в разделе комментариев.Наши специалисты свяжутся с вами в ближайшее время. 
 
 AtoZ CSS Screencast: Анимация по ключевым кадрам 
 
 Загрузка плеера… 

 
 Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи из этой серии здесь. 
 
 Выписка 
 
 Анимация раньше была областью JavaScript. 
 
 Теперь в современных браузерах мы можем анимировать элементы с помощью CSS. 
 
 Свойства блока  @keyframes  и  animation  позволяют указать, что и когда будет анимировано.
 
 В этом выпуске мы рассмотрим типы анимации, которые подходят для CSS, концепцию определения серии из  @keyframes  и, наконец, способ комбинирования этих ключевых кадров с настройками  анимации  для оживления страницы. 
 
 Анимации в CSS 
 
 Поскольку CSS-анимации не имеют всесторонней поддержки браузера, они лучше всего подходят для визуального оформления, а не являются ключевой частью содержимого или дизайна страницы. 
 
 Анимация может запускаться 1 или более раз или бесконечно зацикливаться.Также к одному элементу можно добавить несколько анимаций. 
 
 Анимации могут запускаться в CSS, как только страница загружается, после задержки или через какое-либо изменение на основе состояния, например : hover , : focus  или : active , которое мы рассмотрели в  “Эпизод 8 :  Hover  «. 
 CSS-анимацию 
 также можно запускать и останавливать в Javascript, переключив свойство  animation-play-state . Чуть позже мы рассмотрим другие свойства и синтаксис анимации.
 
 Ключевые кадры 
 
 Чтобы оживить элемент (или выбор элементов), нам нужно указать серию ключевых кадров. 

 
 Самая простая форма анимации по ключевым кадрам идет  от  один набор стилей в начале  до  другой набор стилей в конце в течение определенного промежутка времени. 
 
 Во время анимации стили между ключевыми кадрами автоматически вычисляются браузером — процесс, известный как  анимация . 
 
 Каждый ключевой кадр определяется как блок стилей свойств CSS, который будет применяться к любому элементу, который использует этот  набор  ключевых кадров.
 
  @keyframes moveLeft {
  от {left: 0;}
  на {left: 500px;}
}  
 Учитывая этот набор ключевых кадров, начальный ключевой кадр анимации будет выглядеть следующим образом; а финальный будет выглядеть так.
  @keyframes grow {
  0% {font-size: 20px;}
  75% {font-size: 100px;}
  100% {font-size: 10px;}
}  
 Дополнительные ключевые кадры можно указать с помощью синтаксиса процентов. Если продолжительность анимации была 10 секунд, больше первых 7.Через 5 секунд размер шрифта  элемента  увеличится до  100 пикселей , а затем в течение следующих 2,5 секунд он уменьшится до  10 пикселей . Вы можете указать любое количество свойств для каждого ключевого кадра.
 Анимация 
 Когда определены  @keyframes , они готовы к использованию вместе со свойством  animation-name .
 Существует ряд свойств  анимации  для настройки анимации по мере необходимости:
  animation-name  указывает блок из  @keyframes  для использования
  длительность анимации  указывает время, в течение которого длится анимация
  animation-delay  определяет любую задержку перед запуском анимации
  animation-iteration-count  задает количество повторов
  animation-direction  определяет направление; анимация может воспроизводиться вперед (нормально), в обратном направлении или поочередно вперед и назад
  animation-play-state  позволяет приостанавливать и возобновлять анимацию
  animation-time-function  определяет кривую ускорения воспроизведения анимации между ключевыми кадрами
  animation-fill-mode  определяет, как стили применяются до и после анимации
 Эти 8 свойств можно объединить в сокращенное свойство  animation  следующим образом:
 .коробка {
  анимация: имя длительность задержка счетчик направление время воспроизведения режим заполнения;
}  
 Единственные обязательные свойства, чтобы анимация была видна хотя бы один раз:  animation-name  и  animation-duration .
 Анимация прыгающего мяча 
 Давайте посмотрим на практический пример.
 Мы можем создать шар, используя равную  ширину  и  высоту  box с  border-radius , установленным на  100% . Мы можем заставить мяч подпрыгивать вверх и вниз, точно позиционируя его и анимируя  верхних  или  нижних  значений с течением времени.
 Мы можем придать мячу немного больше реализма, сдавив его в нижней части анимации, прежде чем он полетит обратно вверх, с немного меньшей скоростью.
  .ball {
  позиция: абсолютная;
  ширина: 100 пикселей;
  высота: 100 пикселей;
  радиус границы: 100%;
  анимация: отскок 3с линейно бесконечный;
}
@keyframes bounce {
  0% {bottom: 100%;}
  25% {
    внизу: 0;
    ширина: 100 пикселей;
    высота: 100 пикселей;
  }
  30% {
    внизу: 0;
    высота: 50 пикселей;
    ширина: 110 пикселей;
  }
  35% {
    внизу: 0;
    ширина: 100 пикселей;
    высота: 100 пикселей;
  }
  70% {
    внизу: 100%;
  }
  100% {
    внизу: 100%;
  }
}  
 Мы можем заставить мяч перемещаться по экрану, добавив вторую анимацию, которая анимирует свойство мяча  left .Они могут быть разделены запятыми, поэтому оба применяются к одному и тому же элементу.
 Чтобы создать впечатление, будто мяч медленно отскакивает от экрана, мы можем увеличить продолжительность этой второй анимации.
  @keyframes moveLeft {
  от {left: 0;}
  на {left: 100%;}
}
.мяч {
  анимация: bounce 3s linear, moveLeft 12s linear infinite;
}  
 Поддержка браузера 
 CSS-анимация не поддерживается в IE9 или более ранних версиях, а также в Opera Mini. В IE10, IE11 и Firefox свойства  @keyframes  и  animation  не имеют префиксов, но префиксы  -webkit  необходимы везде.
 Следите за нашей статьей Quick Tip, которая скоро появится!
 CSS Tutorial => Анимация с ключевыми кадрами 
 Пример 
 Для многоступенчатой ​​CSS-анимации вы можете создать CSS  @keyframes . Ключевые кадры позволяют определять несколько точек анимации, называемых ключевыми кадрами, для определения более сложных анимаций.
 Базовый пример 
 В этом примере мы сделаем базовую фоновую анимацию, которая циклически переключается между всеми цветами.
  @keyframes rainbow-background {
         0% {background-color: # ff0000; }
     8,333% {цвет фона: # ff8000; }
    16.667% {цвет фона: # ffff00; }
    25 000% {background-color: # 80ff00; }
    33,333% {background-color: # 00ff00; }
    41,667% {background-color: # 00ff80; }
    50 000% {цвет фона: # 00ffff; }
    58,333% {background-color: # 0080ff; }
    66.667% {background-color: # 0000ff; }
    75.000% {background-color: # 8000ff; }
    83,333% {цвет фона: # ff00ff; }
    91,667% {цвет фона: # ff0080; }
    100.00% {цвет фона: # ff0000; }
}

.RainbowBackground {
    анимация: радуга-фон 5с бесконечность;
}
  
  Посмотреть результат 
 Здесь следует отметить несколько разных моментов. Во-первых, собственно синтаксис  @keyframes .
  @keyframes rainbow-background {
  
 Устанавливает имя анимации  радуга-фон .
  0% {background-color: # ff0000; }
  
 Это определение ключевого кадра в анимации. Первая часть, в данном случае  0% , определяет, где находится ключевой кадр во время анимации.  0%  означает, что это 0% от общего времени анимации с самого начала.
 Анимация автоматически переключается между ключевыми кадрами. Итак, установив следующий цвет фона на  8.333% , анимация плавно займет 8.333% времени на переход между этими ключевыми кадрами.
  .RainbowBackground {
    анимация: радуга-фон 5с бесконечность;
}
  
 Этот код прикрепляет нашу анимацию ко всем элементам, имеющим класс  .RainbowBackground .
 Фактическое свойство анимации принимает следующие аргументы.
  имя-анимации : Имя нашей анимации. В данном случае  радуга-фон 
  animation-duration : Сколько времени займет анимация, в данном случае 5 секунд.
  animation-iteration-count (необязательно) : количество циклов анимации. В этом случае анимация будет продолжаться бесконечно. По умолчанию анимация воспроизводится один раз.
  animation-delay (необязательно) : указывает время ожидания перед запуском анимации. По умолчанию 0 секунд, может принимать отрицательные значения. Например,  -2s  запустит анимацию через 2 секунды после цикла.
  animation-time-function (Необязательно) : Определяет кривую скорости анимации.По умолчанию  легкость , где анимация начинается медленно, ускоряется и заканчивается медленно.
 В этом конкретном примере ключевые кадры  0%  и  100%  указывают  {background-color: # ff0000; } . Если два или более ключевых кадра имеют общее состояние, их можно указать в одном операторе. В этом случае две строки  0%  и  100%  могут быть заменены одной строкой:
  0%, 100% {background-color: # ff0000; }
  
 Кроссбраузерность 
 Для старых браузеров на основе WebKit вам необходимо использовать префикс поставщика как в объявлении  @keyframes , так и в свойстве  animation , например:
  @ -webkit-keyframes {}

-webkit-animation:...
  
 Понимание CSS-анимации в электронной почте: переходы и анимация по ключевым кадрам 
 Маркетологи и дизайнеры электронной почты постоянно ищут способы выделить свои кампании в почтовых ящиках.Маркетологи тестируют различные методы, от дизайна до динамического контента и от рекламных акций до персонализации, чтобы пробудить интерес подписчиков и повысить вовлеченность.
 Один из наиболее распространенных способов улучшить электронную почту — добавить в кампанию анимацию и движение. Движение помогает привлечь внимание к конкретному контенту и втянуть пользователя в этот контент. В то время как движение в электронной почте традиционно достигается с помощью анимированных GIF-файлов, иногда CSS-анимация может быть более эффективным методом.
 CSS-анимация — это анимация, созданная с использованием кода, в частности HTML и CSS.Используя несколько свойств CSS, маркетологи электронной почты могут манипулировать HTML-кодом своих кампаний и создавать такое же ощущение движения, как и при использовании анимированных GIF-файлов. Что еще более важно, они могут создавать более интерактивные и увлекательные кампании.
 В этом руководстве мы рассмотрим плюсы и минусы использования CSS-анимации в электронной почте, а также код, который поддерживает CSS-анимацию.
 Зачем использовать CSS-анимацию? 
 CSS-анимации существуют уже много лет, но только недавно стали широко использоваться как в Интернете, так и в электронной почте.В течение долгого времени анимация в Интернете создавалась либо с помощью проприетарного инструмента, такого как Adobe Flash или Microsoft Silverlight, либо в виде анимированного GIF — формата изображения, который позволяет создавать покадровую анимацию. Поскольку почтовые клиенты никогда не поддерживали использование Flash или Silverlight в почтовых ящиках, маркетологам электронной почты пришлось использовать анимированные GIF-файлы, если они хотели движения в своих кампаниях.
 В основном это так. Согласно нашему исследованию состояния электронной почты за 2018 год, 78% брендов используют анимированные GIF-файлы в своих кампаниях, в то время как только 30% используют анимацию CSS.
 Источник: исследование состояния электронной почты, проведенное Litmus за 2018 год, среди 3000 специалистов по маркетингу.
 Хотя анимированные GIF-файлы имеют более широкую поддержку, анимация CSS имеет ряд преимуществ при правильном использовании.
 Одним из самых больших преимуществ анимации CSS является то, что они создают более быструю загрузку электронных писем по сравнению с использованием анимированного GIF. Поскольку все больше и больше электронных писем читается на мобильных устройствах, маркетологам электронной почты приходится бороться с подписчиками, использующими ограниченную полосу пропускания и небольшие тарифные планы. Анимированные GIF-файлы имеют тенденцию быть более тяжелыми, когда дело доходит до веса файлов, и могут медленно загружаться и отображаться на мобильных устройствах.Однако CSS-анимация — это код. Будучи текстовыми, они быстро загружаются и легко воспроизводятся на большинстве современных устройств. Это отличный способ создать привлекательный пользовательский интерфейс, не сокращая дорогостоящие тарифные планы пользователей.
 Возможно, наиболее важным преимуществом использования CSS-анимации является то, что они позволяют создавать более интерактивные возможности для подписчиков. Поскольку анимация CSS может быть привязана к определенному поведению пользователя — например, наведению курсора на призыв к действию или нажатию на элемент в электронном письме — их можно использовать для циклического просмотра содержимого и различных визуальных состояний кампании.
 Хотя CSS-анимация использует только несколько основных свойств CSS, эти свойства можно использовать для создания чрезвычайно мощных и впечатляющих почтовых кампаний.
 Два типа анимации 
 В основе анимации CSS лежат два ключевых понятия: переходы и анимация по ключевым кадрам. Используя эти две концепции, вы можете создавать все, от простого эффекта наведения курсора на кнопки до более сложных анимаций, которые запускаются в интерактивном письме.
 Переходы 
 Переходы CSS делают именно то, что подразумевает название: они переводят элемент из одного состояния в другое, анимируя этот элемент в процессе.Лучший способ понять переход CSS — взглянуть на пример.
 Допустим, у нас есть кнопка с призывом к действию с простым эффектом наведения, который переключается между двумя цветами фона.
 См. CSS-анимацию пера в электронной почте: пример 1 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.
 В CSS вы можете видеть, что кнопка имеет два состояния. Нормальный и : hover  состояние меняют эти цвета фона. Применяя свойство CSS  transition  к состоянию кнопки по умолчанию, мы можем добавить красивую переходную анимацию между двумя состояниями:
 См. CSS-анимацию пера в электронной почте: пример 2 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.
 Свойство  перехода  принимает несколько значений, включая свойство  ,  тайминга  и  свойства плавности , чтобы определить, как воспроизводится анимация. В нашем примере для свойства перехода установлено значение  все , что будет анимировать каждое свойство CSS в этом элементе. Время установлено на 0,6 с (секунды), чтобы оно не занимало слишком много времени и не казалось вялым, а функция ослабления настроена на  легкость , что, естественно, облегчит анимацию.
 Что замечательно в переходах CSS, так это то, что их можно комбинировать с другими свойствами CSS для создания действительно интересных эффектов. Если бы мы хотели привлечь еще больше внимания к нашему CTA, мы могли бы добавить два дополнительных свойства CSS —  box-shadow  и  transform  — чтобы придать кнопке трехмерный вид.
 См. CSS-анимацию пера в электронной почте: пример 3 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.
 Прелесть переходов CSS в их простоте.С помощью всего одной строчки кода вы можете красиво анимировать два состояния. А в сочетании со всеми другими интересными вещами, которые CSS может делать в наши дни, вы можете создать магию электронной почты.
 Ознакомьтесь с некоторыми из этих ресурсов, чтобы узнать больше о том, чего можно достичь с помощью переходов CSS:
 Анимация по ключевым кадрам 
 Вы когда-нибудь делали флипбук из блокнота для заметок, когда были ребенком? Помните, как перелистывая рисунки, вы могли создать свой собственный небольшой фильм? Аналогичным образом работает анимация ключевых кадров CSS.Вместо того, чтобы рисовать каждый отдельный кадр, вы можете использовать код для настройки отдельных «страниц» или «кадров» для анимации и полагаться на CSS для анимации между этими кадрами. Анимация по ключевым кадрам немного сложнее, чем переходы, но эта сложность дает больше возможностей.
 Опять же, лучший способ понять анимацию по ключевым кадрам — это посмотреть на пример.
 См. CSS-анимацию пера в электронной почте: пример 4 от Джейсона Родригеса (@rodriguezcommaj) на CodePen.
 В приведенном выше примере у меня есть фиктивное электронное письмо, которое нужно прокрутить на мобильном устройстве.Чтобы стимулировать эту прокрутку, я добавил стрелку, которая использует анимацию по ключевым кадрам, чтобы мягко подпрыгивать вверх и вниз. Хотя то же самое можно было сделать с помощью анимированного GIF, гораздо быстрее было использовать код для создания этого движения.
 Первым шагом в создании анимации ключевых кадров CSS является определение анимации с помощью правила  @keyframes . Вам нужно добавить имя, с помощью которого впоследствии можно будет ссылаться на эту анимацию. В данном случае я назвал его  bobbing , так как стрелка делает именно это.
 В рамках этого правила CSS я установил в анимации два кадра:  от  и  до . Первый —  из  — является начальным состоянием анимации и использует свойство преобразования без каких-либо реальных значений, чтобы отметить начальное положение стрелки. Второй кадр — с  по  — это конечная точка. Опять же, используя преобразование  , я переместил стрелку на 60 пикселей ниже.
 Вы можете создавать более сложные анимации на основе кадров, заменяя ключевые слова from и to на проценты для обозначения отдельных кадров.Например, если бы я хотел иметь анимацию с пятью кадрами вместо двух, я мог бы добавить в свойства CSS 20%, 40%, 60%, 80% и 100%, при этом каждый набор свойств заключен в фигурные скобки, например в коде выше.
 После настройки ключевых кадров необходимо запустить анимацию. Мы делаем это, ориентируясь на элемент HTML, который хотим анимировать, и добавляем свойство анимации к этому элементу. В приведенном выше примере я нацелен на  div  с классом  animate .В свойстве  animation  вы можете включить ряд значений для определения поведения вашей анимации. К ним относятся:
 animation-delay
 animation-direction
 animation-duration
 animation-fill-mode
 animation-iteration-count
 animation-name
 animation-play-state
 animation-time -function
 Не все из них необходимы для каждой создаваемой CSS-анимации. В нашем примере я просто использую продолжительность, временную функцию, количество итераций и направление.Продолжительность отсчитывается в секундах ( 1 с ), а функция синхронизации установлена ​​на  легкость . Поскольку я хочу, чтобы анимация зацикливалась, я установил счетчик итераций на  бесконечное , а затем  на обратное  направление по завершении.
 В CSS-анимацию по ключевым кадрам можно многое сделать, поэтому я бы посоветовал покопаться в отличной документации Mozilla Developer Network по этому вопросу.
 Хотя это базовый пример анимации ключевых кадров CSS, мы надеемся, что он даст вам представление о возможностях электронной почты, когда вы хотите выйти за рамки анимированных GIF-файлов.
 Поддержка 
 Хотя CSS-анимация имеет много преимуществ, основным недостатком их использования является ограниченная поддержка в почтовых клиентах.
 Следует также отметить, что поддержка сопровождается несколькими ошибками, которые Джастин Кху отметил в разделе «Особые особенности клиента» на своей превосходной странице поддержки CSS для кинетической электронной почты.
 Что хорошо в анимации CSS, так это то, что даже когда они не поддерживаются, они изящно откатываются назад. В почтовых клиентах без поддержки элементы HTML по-прежнему отображаются, но не анимируются.Ваша электронная почта по-прежнему работает, и подписчики могут ею пользоваться.
 Animation Inspiration 
 В индустрии электронной почты много людей используют CSS-анимацию, в том числе Litmus! Чтобы получить лучшее представление о возможностях использования CSS-анимации, мы собрали некоторые из наших любимых кампаний:
 Хотя некоторые из этих электронных писем являются более экспериментальными, чем типичная маркетинговая кампания по электронной почте, они включают идеи, которые можно использовать для повышения вовлеченности. практически для любой отрасли.Все, что нужно, — это немного практики, тестирования и приключений.
 Проверьте свои анимации с помощью Litmus Builder 
 Хотите начать использовать CSS-анимацию в своих кампаниях? Начните создавать свое следующее электронное письмо с Litmus Builder — единственным редактором кода, разработанным дизайнерами электронной почты для дизайнеров электронной почты.