Keyframes animation css: animation-delay — CSS | MDN — Программирование на Python и Objective-C в Mac OS

Содержание

animation-name — CSS | MDN

Experimental: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS свойство animation-name задаёт список анимаций, чтобы применить к элементу. Каждое имя является правилом @keyframes (en-US), которое задаёт значения свойств для последовательности анимации.

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


animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;


animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;


animation-name: initial
animation-name: inherit
animation-name: unset

Значения

none: Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
<custom-ident>: Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от a до z, цифр от 0 до 9, подчёркивания (_), и/или черты (-). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть none, unset, initial, или inherit в любой комбинации случаев.

Формальный синтаксис

BCD tables only load in the browser

Правило @keyframes | CSS справочник

CSS правила

Определение и применение

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

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

Каждое правило @keyframes должно содержать список стилей для селекторов ключевых кадров, каждый из которых задаёт процент для анимации, при котором происходит ключевой кадр. Указать, когда происходит смена стиля необходимо в процентах (0% — это начало анимации, 100% — это когда анимация завершена), или с помощью ключевых слов «from» и «to», которые соответствуют, как 0% и 100%. Для корректного проигрывания анимации, ключевые кадры должны содержать начало цикла и его конец (значения 0% | from и 100% | to).

Допускается перечислять ключевые кадры в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему). Если анимация имеет те же начальные и конечные свойства, то вы можете перечислить их через запятую: 0%, 100% {}.

Если по какой-то причине вы решили включить в правило свойства, которые не могут быть анимированы, то они будут проигнорированы браузером, а свойства, которые могут быть анимированы будут включены в анимацию.

Свойства, указанные в ключевом кадре со значением !important игнорируются. Ознакомиться, как происходит отмена значимости стилей (!important) вы можете в статье «Каскадность в CSS» (раздел «Нюансы конфликтов»).

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

CSS синтаксис:

@keyframes animationName {
	from | %  {css-styles} // начало цикла
	to | %  {css-styles} // конец цикла
}
	
	animationName - имя анимации
	from | to | %  - селектор ключевого кадра
	css-styles - css стили

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

Значение	Описание
animationName (имя анимации)	Задаёт имя анимации. Обязательный параметр. Используется в свойстве animation-name, либо в универсальном свойстве animation. Имя анимации может состоять из латинских букв без учета регистра от A до Z, цифр от 0 до 9, знака подчеркивания (_), и/или тире (—). Первый символ должен быть буквой (то есть не должен начинаться с числа, даже если перед ним ставится тире). Два тире подряд запрещены в начале имени. Кроме того, не могут использоваться специальные зарезервированные слова, такие как none, unset, initial, или inherit в любом сочетании.
keyframes-selector (селектор ключевого кадра)	Процент от продолжительности анимации. Обязательный параметр. Допустимые значения: 0%-100% from (тоже самое, что 0%) to (тоже самое, что 100%) Допускается использовать множество селекторов ключевого кадра, при этом перечислять ключевые кадры возможно в любом порядке, так как браузер их обрабатывает не в порядке размещения, а в зависимости от значения процента (от меньшего значения к большему).
css-styles (css стили)	Одно или несколько допустимых (анимируемых) свойств стиля CSS. Обязательный параметр.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования CSS правила @keyframes</title>
<style> 
.test {
width: 75px; /* устанавливаем ширину блока */
height: 75px;  /* устанавливаем высоту блока */
border-radius: 50px;  /* определяем форму углов элемента */
position: relative;  /* элемент с относительным позиционированием (position:static - по умолчанию и, как следствие, значение свойства left не повлияли бы на позиционирование элемента) */
-webkit-animation: iliketomoveit 5s infinite;  /*  для поддержки ранних версий браузеров */
animation: iliketomoveit 5s infinite;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах), продолжительность анимации и указываем, что анимация будет повторяться бесконечно  */
} 
@-webkit-keyframes iliketomoveit { /* для поддержки ранних версий браузеров */ 
	0%   {left: 0px;} /* задаем начало анимации */ 
	25%  {left: 400px; background: red;} /* сдвигаем элемент на 400px от левого края при этом устанавливаем цвет заднего фона */ 
	75%  {left: 200px;}  /* уменьшаем сдвиг от левого края */ 
	100% {left: 0px; background: green;} /* возвращаем элемент на первоначальную точку и изменяем цвет заднего фона */ 
	} 
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px; background: red;} 
	75%  {left: 200px;} 
	100% {left: 0px; background: green;} 
	} 
</style>
</head>
<body>
<div class = "test"></div>
</body>
</html>

Пример использования CSS правила @keyframes (ключевые кадры для анимации в CSS).CSS правила

Правило @-webkit-keyframes | назначение, допустимые значения, примеры

Правило @-webkit-keyframes — позволяет пользователю описать анимацию CSS свойств в виде перечня ключевых кадров.

Синтаксис

@-webkit-keyframes  {
     {
	:;
	:;
    }
     {
	:;
	:;
    }
    .....................
     {
	:;
	:;
    }	
}

— задает имя анимации в виде строки в одинарных кавычках (это имя потом используется при вызове анимации в качестве значения свойства -webkit-animation-name)
— задает селекторы которые определяют ключевые кадры. Они могут принимать значения:
- from — внутри этого селектора описывается значения анимированных свойств в начальный момент анимации (также можно описать начальный кадр анимации, используя эквивалентный селектор 0%)
- to — внутри этого селектора описывается значения анимированных свойств в конечный момент анимации (также можно описать конечный кадр анимации, используя эквивалентный селектор 100%)
- — описывает значения анимированных свойств в данный момент времени (момент времени отсчитывается в процентном отношении от значения свойства -webkit-animation-duration)
— анимируемое CSS свойство
— значения анимированного свойств в момент, описываемый селектором кадра

Пример кода

div {
	top:50px;
	left:0px;
	-webkit-animation-name:'movement';
	-webkit-animation-duration:10s;
}
@-webkit-keyframes 'movement' {
    from {
	top:50px;
	left:0px;
    }
    50% {
	top:150px;
	left:100px;
    }
    to {
	top:400px;
	left:300px;
    }	
}

В примере описана анимация перемещения (изменение координат блока с течением времени). В первый момент анимации, описываемый селектором кадра from, координаты блока top:50px, left:0px. Следующий ключевой кадр описывает значения свойств через 50% времени анимации (в данном примере — 5 секунд). Координаты блока станут top:150px, left:100px. В последний момент времени описываемый селектором кадра to (через 10с) блок получит абсолютные координаты top:400px, left:300px.
Замечание! Анимация происходит не в три рывка, а плавно.

Поддерживается браузерами	Safari 4.0 и выше Chrome 3.0 и выше

По теме

Как создать анимацию ключевых кадров CSS3

Функция анимации CSS3 позволяет создавать анимацию по ключевым кадрам.

Создание анимации CSS3

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

Анимация CSS3 делает шаг вперед с помощью анимации на основе ключевых кадров, которая позволяет вам указывать изменения в свойствах CSS с течением времени в виде набора ключевых кадров, например флэш-анимации. Создание CSS-анимации — это двухэтапный процесс, как показано в примере ниже:

Первым шагом создания CSS-анимации является определение отдельных ключевых кадров и присвоение имени анимации с помощью объявления ключевых кадров.
Второй шаг — это ссылка на ключевые кадры по имени с использованием свойства animation-name , а также добавление animation-duration и других дополнительных свойств анимации для управления поведением анимации.

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

по горизонтали из одной позиции в другую с помощью функции анимации CSS3.

  .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: относительное;
    / * Chrome, Safari, Opera * /
    -webkit-имя-анимации: moveit;
    -webkit-animation-duration: 2 секунды;
    / * Стандартный синтаксис * /
    имя-анимации: moveit;
    продолжительность анимации: 2 с;
}
 
/ * Chrome, Safari, Opera * /
@ -webkit-keyframes moveit {
    от {left: 0;}
    на {left: 50%;}
}
 
/ * Стандартный синтаксис * /
@keyframes moveit {
    от {left: 0;}
    на {left: 50%;}
}

Вы должны указать по крайней мере два свойства animation-name и animation-duration (больше 0), чтобы анимация происходила.Однако все остальные свойства анимации являются необязательными, поскольку их значения по умолчанию не препятствуют возникновению анимации.

Примечание. Не все свойства CSS можно анимировать. Как правило, любое свойство CSS, которое принимает значения, являющиеся числами, длинами, процентами или цветами, можно анимировать.

Определение ключевых кадров

Ключевые кадры используются для определения значений свойств анимации на различных этапах анимации.Ключевые кадры задаются с помощью специального правила CSS — @keyframes . Селектор ключевых кадров для правила стиля ключевых кадров начинается с процента (% ) или ключевых слов от (то же самое, что 0%) или до (то же самое, что 100%). Селектор используется, чтобы указать, где создается ключевой кадр на протяжении анимации.

Проценты представляют собой процент от продолжительности анимации, 0% представляет начальную точку анимации, 100% представляет конечную точку, 50% представляет среднюю точку и так далее.Это означает, что 50% ключевой кадр в 2-секундной анимации будет равен 1 секунде в анимации.

  .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    маржа: 100 пикселей;
    фон: красный;
    положение: относительное;
    слева: 0;
    / * Chrome, Safari, Opera * /
    -webkit-имя-анимации: shakeit;
    -webkit-animation-duration: 2 секунды;
    / * Стандартный синтаксис * /
    имя-анимации: shakeit;
    продолжительность анимации: 2 с;
}
 
/ * Chrome, Safari, Opera * /
@ -webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37,5% {left: -25px;}
    50% {left: 25px;}
    62,5% {left: -10px;}
    75% {left: 10px;}
}
 
/ * Стандартный синтаксис * /
@keyframes shakeit {
    12,5% {left: -50px;}
    25% {left: 50px;}
    37,5% {left: -25px;}
    50% {left: 25px;}
    62,5% {left: -10px;}
    75% {left: 10px;}
}

Свойство сокращения анимации

При создании анимации необходимо учитывать множество свойств.Однако также можно указать все свойства анимации в одном свойстве, чтобы сократить код.

Свойство animation — это сокращенное свойство для одновременной установки всех индивидуальных свойств анимации в указанном порядке. Например:

  .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: относительное;
    / * Chrome, Safari, Opera * /
    -webkit-animation: repeatit 2s линейный 0s бесконечный альтернативный;
    / * Стандартный синтаксис * /
    анимация: repeatit 2s линейная 0s бесконечная альтернатива;
}
 
/ * Chrome, Safari, Opera * /
@ -webkit-keyframes repeatit {
    от {left: 0;}
    на {left: 50%;}
}
 
/ * Стандартный синтаксис * /
@keyframes repeatit {
    от {left: 0;}
    на {left: 50%;}
}

Примечание: Если какое-либо значение отсутствует или не указано, вместо него будет использоваться значение по умолчанию для этого свойства.Это означает, что если значение свойства animation-duration отсутствует, переход не произойдет, поскольку его значение по умолчанию равно 0.

Свойства анимации CSS3.

В следующей таблице представлен краткий обзор всех свойств, связанных с анимацией.

Объект	Описание
`анимация`	Сокращенное свойство для установки всех свойств анимации в одном объявлении.
`имя-анимации`	Задает имя `@keyframes` определенных анимаций, которые должны быть применены к выбранному элементу.
`продолжительность анимации`	Определяет, сколько секунд или миллисекунд требуется анимации для завершения одного цикла анимации.
`функция синхронизации анимации`	Определяет, как будет развиваться анимация в течение каждого цикла i.е. функции ослабления.
`задержка анимации`	Указывает, когда начнется анимация.
`количество итераций анимации`	Указывает, сколько раз цикл анимации должен быть воспроизведен перед остановкой.
`анимация-направление`	Указывает, должна ли анимация воспроизводиться в обратном порядке в альтернативных циклах.
`Анимация-режим заполнения`	Определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.
`состояние воспроизведения анимации`	Указывает, запущена или приостановлена анимация.
`@keyframes`	Задает значения свойств анимации в различных точках анимации.

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

CSS дает разработчикам возможность оживить свои веб-страницы с помощью анимации по ключевым кадрам.

CSS-анимация достигается изменением начального состояния элемента HTML с помощью его различных свойств. Некоторые общие свойства CSS, которые можно анимировать, включают:

Ширина
Рост
Позиция
Цвет
Непрозрачность

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

Что такое элемент ключевых кадров?

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

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

Пример структуры ключевых кадров

  
 @keyframes идентификатор {
 из {
 / *, с которого должна начинаться анимация. * / 
} с 
 на {
 / *, где должна закончиться анимация * / 
} 
}

Допустим, вы хотите оживить зеленую прямоугольную кнопку, превратив ее в синюю круглую кнопку.

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

Если вы думаете, «это не слишком похоже на анимацию». Это потому, что ключевой компонент всего этого процесса еще не введен — этот компонент является свойством анимации.

Свойство анимации

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

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

Название анимации
Продолжительность анимации
Функция времени анимации
Анимация-задержка
Количество итераций анимации

Использование анимации на веб-странице

Используя сценарий выше, цель — создать анимированную кнопку.

Пример анимации кнопки

  
  
  
  
  
  
  Animation

Раздел анимации в приведенном выше коде содержит пять подсвойств, упомянутых ранее.У каждого свойства есть очень отличная функция, и вместе они работают над анимацией любого HTML-элемента, на который они настроены.

Связанный: Как настроить таргетинг на часть веб-страницы с помощью селекторов CSS

Свойство имени анимации

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

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

Свойство длительности анимации

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

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

Свойство задержки анимации

Это свойство важно по одной причине; для полной загрузки некоторых веб-страниц может потребоваться несколько секунд (из-за нескольких различных факторов). Таким образом, свойство animation-delay предотвращает немедленный запуск анимации на тот случай, если веб-странице потребуется некоторое время для загрузки.

В приведенном выше примере для свойства animation-delay установлено значение 4s, что означает, что анимация не начнется раньше, чем через 4 секунды после посещения веб-страницы (что дает веб-странице достаточно времени для загрузки до начала анимации).

Свойство счетчика-итераций анимации

Это свойство указывает, сколько раз анимированный элемент должен переходить из одного состояния в другое. Свойство animation-iteration-count принимает значения, которые являются словами и числами. Числовое значение может быть любым, от 1 и выше, в то время как значение слова обычно « бесконечное ».

В приведенном выше примере для значения счетчика итераций анимации установлено значение « бесконечное », что означает, что пока веб-страница открыта, свойство кнопки будет непрерывно переходить из одного состояния в другое.

Свойство функции синхронизации анимации

Это свойство определяет движение анимированного элемента при переходе из одного состояния в другое. Свойству функции синхронизации анимации обычно назначается одно из трех значений замедления.

Легкость в
Легкость
Легкость входа

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

Сокращение нашего кода

В большинстве случаев сокращение длины программы рассматривается как практический подход. Это главным образом потому, что меньшее количество строк кода снижает вероятность того, что ошибки останутся незамеченными в ваших программах.

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

Уменьшение кода для примера анимации кнопки

  
  
  
  
  
 < meta name = "viewport" content = "width = device-width, initial-scale = 1.0 "> 
  Animation

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

Теперь вы можете анимировать свои веб-страницы

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

Свойство анимации со списком обширных подсвойств, несомненно, интересно. Тем не менее, существует широкий спектр других свойств CSS, которые могут оказаться вам полезными.

Кредит изображения: Джош Ример / Unsplash

Шпаргалка по основным свойствам CSS3

Освойте необходимый синтаксис CSS с помощью нашей шпаргалки по свойствам CSS3.

Об авторе

Кадейша Кин
(Опубликовано 31 статья)

Кадейша Кин (Kadeisha Kean) — разработчик программного обеспечения полного стека и автор технических / технологических писателей.У нее отличная способность упрощать некоторые из самых сложных технологических концепций; производить материал, понятный любому новичку в технологии. Она увлечена писательством, разработкой интересного программного обеспечения и путешествиями по миру (с помощью документальных фильмов).

Более
От Кадейши Кин

Подпишитесь на нашу рассылку новостей

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться

новый код — Основы анимации ключевых кадров CSS

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

Ключевые кадры CSS и переходы

Термин «анимация CSS» может сбивать с толку: означает ли он переходы CSS, ключевые кадры или и то, и другое? Хотя переходы и ключевые кадры имеют схожий синтаксис и цели, они представляют собой разные методы:

CSS-переходы — это простые анимации только с двумя возможными точками: начальный кадр и конечный кадр.
Управление переходом ограничено определением этих начальной и конечной точек, а также времени и кривой замедления между ними.

Переходы — это «одноразовые» события, обычно запускаемые действием пользователя (например, наведением курсора мыши). Анимации ключевых кадров CSS не нуждаются в инициирующем событии и могут зацикливаться или циклически.

Использование ключевых кадров и переходов

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

Для наших целей термин «CSS-анимация» охватывает как ключевые кадры, так и переходы.

Синтаксис ключевых кадров CSS

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

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

и оформить его в виде круга с радиусом границы :

  div # redball {
ширина: 150 пикселей; высота: 150 пикселей;
граница: 2px solid # 000;
фон: красный;
радиус границы: 50%;
позиция: абсолютная;
}

Что изменяет внешний вид соответствующего элемента в нашем :

Проще всего думать о ключевых кадрах CSS не как о кадрах как таковых, а как о точках на временной шкале произвольной длины.Начало анимации будет 0%; наполовину — 50%, и завершено — 100%. Таким образом, простая анимация с двумя ключевыми кадрами для перемещения нашего элемента #redball может выглядеть так:

  @keyframes bounce {
0% {top: 300px; }
100% {top: 0; }
}

(обратите внимание на внутренние фигурные скобки).

Как правило, это должно быть в начале нашей таблицы стилей, как и в случае с @ font-face . Обратите внимание, что имя, используемое для последовательности анимации (« bounce » в нашем случае), произвольно: вы можете в значительной степени называть анимацию, как вам нравится, при условии, что имя соответствует соглашениям об именах в Интернете, и вы ссылаетесь на то же имя. позже, когда вы вызовете последовательность.

Давайте сделаем это сейчас: вернемся к нашему определению CSS #redball и добавим вызов к анимации вместе с некоторой другой информацией:

  div # redball {
ширина: 150 пикселей; высота: 150 пикселей;
граница: 2px solid # 000;
фон: красный;
радиус границы: 50%;
позиция: абсолютная;
анимация: bounce 2s бесконечная альтернатива;
}

Часть длительности ( 2 с , для двух секунд) такая же, как и в анимации перехода CSS; бесконечный означает, что анимация будет воспроизводиться вечно, а альтернативный означает, что анимация будет «пинг-понг» вперед и назад.Я расскажу о других свойствах вместе с некоторыми практическими примерами в следующих статьях.

Анимация Дэна Эллисона, используется по лицензии Creative Commons Attribution-NonCommercial 2.0 Generic

Нравится этот фрагмент? Я приглашаю вас подписаться на меня на twitter.com/dudleystorey, чтобы узнать больше.

Анимация ключевых кадров CSS с паузой между ключевыми кадрами | by Davecar Grave

общее время = 12 с
время анимации (%) = 8.33% (8,33% = 1 секунда времени)
пауза анимации (%) = 16,67% (16,67% = 2 секунды времени)
процент ключевого кадра анимации
0 % → 8,33% → 25% → 33,33% → 50% → 58,33% → 75% → 83,33% → 100%

Так как анимация вращается на 360 градусов, и у нас 4 итерации.
значение ключевого кадра = 360/4 = 90 градусов
У нас есть 90 градусов на итерацию, чтобы получить градусов на каждой итерации, мы увеличим его на 90 градусов .
0deg + 90deg = 90deg [1-я итерация]
90deg + 90deg = 180deg [2-я итерация]
180deg + 90deg = 270deg [3-я итерация]
260deg + [4-я итерация]

Теперь у нас есть

0 градусов → 90 градусов → 180 градусов → 270 градусов → 360 градусов [ градусов в каждой итерации]

Теперь, когда у нас есть все значения, которые мы нужно, давайте добавим это в наш код.

 .planet {
 animation: rotateEarth 12s infinite 
} @keyframes rotateEarth {
 0% {
 transform: rotate (0deg) 
} 
 8.33% {
 transform: rotate (90deg) 
} 
 25% {
 transform: поворот (90 градусов) 
} 
 33,33% {
 преобразование: поворот (180 градусов) 
} 
 50% {
 преобразование: поворот (180 градусов) 
} 
 58,33% {
 преобразование: поворот (270 градусов) 
} 
 75% {
 transform: rotate (270deg) 
} 
 83.33% {
 transform: rotate (360deg) 
} 
 100% {
 transform: rotate (360deg) 
} 
}

Как вы можете видеть в приведенном выше коде, есть некоторые ключевые кадры с одинаковым значением.Мы можем написать меньше кода, разделив запятыми ключевые кадры с одинаковым значением.

 @keyframes rotateEarth {
 0% {
 преобразование: поворот (0 градусов) 
} 
 8,33%, 25% {
 преобразование: поворот (90 градусов) 
} 
 33,33%, 50% {
 преобразование: поворот (180 градусов) 
 } 
 58,33%, 75% {
 преобразование: поворот (270 градусов) 
} 
 83,33%, 100% {
 преобразование: поворот (360 градусов) 
} 
}

15 примеров анимации CSS с потрясающими ключевыми кадрами и код

Добавление и использование CSS-анимация по ключевым кадрам может повысить уровень взаимодействия с пользователем в Интернете.Всякий раз, когда используются ключевые кадры, они заставляют пользователей взаимодействовать чаще, чем страница без анимации. Это было проверено, и результаты более чем на 50% соответствуют действительности во всей веб-индустрии. Однако это зависит от типа анимации. Например, раздражающая анимация по ключевым кадрам заставит ваших пользователей чаще подпрыгивать. Тем не менее, отличным примером увлекательной анимации является иконическое гамбургер-меню, при нажатии на которое обычно открывается меню.

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

Ниже вы найдете примеры и код at-правил ключевых кадров каскадных таблиц стилей в Интернете и с codepen.io. Не стесняйтесь использовать эти примеры и код ключевых кадров на своих веб-страницах и проектах.

Плавающая фабрика CSS-анимации

Плавающая фабрика CSS-анимации

О проекте

Плавающая фабрика CSS-анимации

Плавающая фабрика CSS-анимации — это проект на codepen.io, который использует ключевые кадры CSS для анимации фабричного острова, парящего в небе. Например, эта фабрика использует две разные анимации для достижения эффекта, который вы видите. Чтобы продемонстрировать, первый эффект — это облачко из дымовой трубы. В облаке используется ключевой кадр, который перемещает облака, переводя свойство непрозрачности CSS в 0, и перемещает облако от дымовой трубы с помощью свойства translateX преобразования CSS. В результате облачность затухает по мере удаления от дымовой трубы. Во-вторых, другой ключевой кадр включает весь остров.То есть это предполагает перемещение всего острова вверх и вниз. Это связано с тем, что при каждом запуске ключевого кадра он использует CSS-переход translateY для перемещения острова вверх и вниз по оси Y.

Автор

Дэвид Макфедерс
codepen.io

Наблюдательная анимация ключевых кадров на чистом CSS

Контрольная анимация ключевых кадров на чистом CSS

О проекте

Контрольная анимация ключевых кадров на чистом CSS

Анимация ключевых кадров на чистом CSS — это проект на codepen.io, который использует чистую анимацию ключевых кадров CSS для создания рабочих тикающих часов. Для иллюстрации в этом примере анимированы две разные части часов: секундная стрелка и фаза луны. Во-первых, в анимации из вторых рук используется свойство CSS transform rotate для поворота руки второй руки на 360 градусов. В результате по окончании вращения анимация замыкается. Затем это продолжается бесконечно. Во-вторых, фаза луны состоит из нескольких частей анимации, объединенных в одну.Например, эти части анимации представляют собой разные фазы лунного цикла. Это включает в себя Солнце и многие фазы Луны. В результате лунный цикл очень сложен. Чтобы справиться с этой сложностью, анимация фазы луны использует преобразование translate, свойство непрозрачности и цвет фона для анимации цикла.

Автор

Гжегож Витчак
codepen.io

Дизайн адаптивного материала CSS-анимации

Дизайн адаптивного материала CSS-анимации

О проекте

Дизайн адаптивного материала CSS-анимации

Дизайн адаптивного материала CSS-анимации — это проект на codepen.io, который использует анимацию по ключевым кадрам для анимации веб-страницы, созданной с помощью материалов Google. Чтобы продемонстрировать, в этом примере используются четыре разных правила для ключевых кадров. Имя этих ключевых кадров — кнопка, статья, заголовок и окно. Во-первых, ключевой кадр кнопки анимирует кнопку с розовым кружком с помощью свойства position. То есть он изменяет абсолютное положение кнопки при изменении размера окна. Во-вторых, анимация статьи анимирует белый «лист бумаги» внутри окна, изменяя положение, ширину и высоту.В-третьих, во время анимации заголовка ключевой кадр изменяет высоту и ширину фиолетового заголовка в документе. Наконец, анимация окна изменяет ширину и высоту всего документа по мере выполнения анимации. В заключение, все эти @keyframes создают представление веб-сайта с мобильного на настольный, которое повторяется снова и снова.

Ключевой кадр с плавающей пылью CSS

Ключевой кадр с плавающей пылью CSS

О проекте

Ключевой кадр с плавающей пылью CSS

Ключевой кадр с плавающей пылью CSS — это проект на базе кода.io, который оживляет плавающую пыль, которая перемещается всякий раз, когда пользователь помещает курсор на веб-страницу. Поскольку курсор взаимодействует с проектом, автор дополнительно использует jQuery для создания эффекта, который вы видите. Чтобы продемонстрировать, в этом примере используются несколько разных слоев изображений для создания эффекта пыли. Каждый слой пыли имеет разный уровень непрозрачности и накладывается друг на друга. Непрозрачность ближайшего изображения выше, чем у самого дальнего. Это позволяет увидеть все частицы. Работа этой анимации заключается в перемещении каждого изображения вправо с разной скоростью.Это достигается с помощью свойства transition translate. В конце анимации, через 600 секунд, анимация повторяется, поскольку счетчик-итераций CSS-анимации установлен на бесконечность.

Автор

Мэтью Уильямс
codepen.io

Анимация ключевого кадра на чистом CSS «Веселая свеча»

Анимация ключевого кадра на чистом CSS «Смешная свеча»

О проекте

Анимация ключевого кадра на чистом CSS «Смешная свеча»

Анимация ключевого кадра на чистом CSS «Смешная свеча» — это проект на codepen.io, который отображает короткую анимацию забавной сердитой свечи, пламя которой задувается и снова зажигается. Для демонстрации в этом примере используется несколько различных CSS-анимаций ключевых кадров. Во-первых, анимация использует CSS-переход translate и CSS-переход rotateZ для анимации задувания и повторного зажигания свечи. Прямо перед тем, как свеча задует пламя, срабатывает ключевой кадр, чтобы оживить расширение света. Поскольку более высокой свече необходимо сделать вдох, прежде чем задуть, воздух движется к более высокой свече.Этот эффект имитирует реальную жизнь, потому что пламя дает более яркий свет, чем больше кислорода подается в пламя. Расширение света использует свойство трансформации масштабов для масштабирования кольца, которое расширяется, а затем вскоре исчезает.

Ключевой кадр с бесконечным окном CSS

Ключевой кадр с бесконечным окном CSS

О проекте

Ключевой кадр с бесконечным окном CSS

Ключевой кадр с бесконечным окном CSS — это проект на codepen.io, который отображает анимированную рамку для лазания. Чтобы проиллюстрировать, когда коробка достигает вершины, она падает обратно вниз.Затем это начинается снова. Этот эффект достигается за счет использования единственного правила ключевого кадра CSS. Например, ключевой кадр использует проценты как шаги в анимации. На каждом шаге используется свойство преобразования CSS translate и свойство поворота CSS transform. На вершине подъема преобразование сбрасывается путем быстрого последовательного использования большего количества процентов.

Анимация ключевого кадра CSS с двойной спиралью

Анимация ключевого кадра CSS с двойной спиралью

О проекте

Анимация ключевого кадра CSS с двойной спиралью

Анимация ключевого кадра CSS с двойной спиралью — это проект на codepen.io, который отображает анимацию двойной спирали с использованием jQuery, CSS и HTML. Чтобы продемонстрировать, в этом примере используются ключевые кадры для вращения сфер, прикрепленных к линиям, по оси Y. По мере того как сферы удаляются от пользователя, они уменьшаются. Кроме того, по мере приближения сфер к пользователю они увеличиваются в масштабе. По этой причине это создает эффект вращения, который вы видите с каждым набором сфер. Кроме того, каждый набор сфер задерживается в начале загрузки страницы. Таким образом, задержка и вращение для каждого набора создают двойную спираль, которую вы видите в примере.

Граничная анимация на чистом CSS

Граничная анимация на чистом CSS

О проекте

Граничная анимация на чистом CSS

Граничная анимация на чистом CSS — это проект на codepen.io, который показывает анимацию линий, граничащих с рамкой. Эти линии перемещают коробки снова и снова. Чтобы продемонстрировать, этот ключевой кадр создается с помощью свойства clip. По мере запуска ключевого кадра блоки перемещают свои границы, как если бы они перемещались по боковой границе блока.

Чистая анимация страницы ошибок CSS 404

Чистая анимация страницы ошибок CSS 404

О проекте

Чистая анимация страницы ошибок CSS 404

Анимация страницы ошибок 404 на чистом CSS — это проект на codepen.io, который анимирует облака на странице 404. Эти облака анимируются с использованием правил ключевого кадра. Чтобы проиллюстрировать, эффект облака создается путем изменения положения левого края каждого облака. Кроме того, всего существует шесть различных облаков, каждое из которых имеет разный масштаб. Кроме того, каждое из облаков использует ключевой кадр с левым полем с разной длительностью задержки. По этой причине он создает облака, перемещающиеся по странице 404 в разное время.

CSS анимированная трехмерная солнечная система

CSS анимированная трехмерная солнечная система

О проекте

CSS анимированная трехмерная солнечная система

CSS анимированная трехмерная солнечная система — это проект на codepen.io. Этот проект отображает трехмерное или двухмерное представление Солнечной системы, где каждая планета движется с репрезентативной скоростью. Чтобы продемонстрировать, всякий раз, когда пользователь сначала просматривает трехмерную модель, модель показывает двухмерный вид сверху, который переходит к более широкому трехмерному боковому виду солнечной системы. Кроме того, действительно интересной особенностью этого примера является то, что планеты вращаются вокруг Солнца, что сравнивается с реальным представлением их реальной скорости. Более того, вращение вокруг Солнца создается с помощью ключевых кадров для вращения планет вокруг центральной оси.Эта 3D-модель полагается на свойство стиля преобразования для сохранения положения элементов в 3D-пространстве.

Автор

Джулиан Гарнье
codepen.io

Анимация текста CSS

Анимация текста CSS

О проекте

Анимация текста CSS

Анимация текста CSS — это проект на codepen.io, который отображает текст, который перемещается вверх или вниз в поле зрения. Чтобы продемонстрировать, этот изменяющийся текст приводится в действие ключевыми кадрами. Во-первых, ключевые кадры используют преобразование translate3d для изменения позиции Y элемента div контейнера с именем «content__container__list».Контейнер содержимого — это список HTML, содержащий четыре дочерних элемента, содержащих текст. По мере того как ключевой кадр перемещает контейнер со свойством преобразования, текст перемещается в представление на основе текущего шага ключевого кадра. Другими словами, текст меняет положение во время каждого шага ключевого кадра. По этой причине текст обновляется новым высказыванием, которое начинается со слова «привет».

CSS анимированное синее гиперпространство

ACSS анимированное синее гиперпространство

О проекте

CSS анимированное синее гиперпространство

CSS анимированное синее гиперпространство — это проект на codepen.io, который бросает пользователя в гиперпрыжок. Пространство и время искажаются, когда пользователь летит по вселенной. Чтобы продемонстрировать, эффект гиперпространства создается с помощью одного изображения, загруженного извне. Сначала изображение дублируется сзади и со всех сторон туннеля. Во-вторых, ключевой кадр, называемый «перемещение», использует свойство transform translateZ для перемещения изображений по оси Z к пользователю. В результате создается эффект движения вперед. В-третьих, анимация также использует свойство transform rotate для поворота туннеля на 90 градусов во время движения.Таким образом, все три ключевых кадра вместе создают эффект гиперпространственного прыжка!

Муравьи на Sugar CSS-анимации

Муравьи на Sugar CSS-анимации

О проекте

Муравьи на Sugar CSS-анимации

Муравьи на Sugar CSS-анимация — это проект на codepen.io, который демонстрирует, как муравьи ползают по сахарному кубику. Чтобы проиллюстрировать этих голодных муравьев, муравьи созданы с использованием ключевых кадров SVG и CSS. По этой причине каждый муравей представляет собой SVG, встроенный в HTML-код.Кроме того, для каждого муравья создается ключевой кадр с отдельным именем, который перемещает муравья, используя свойства положения и поворота. Например, муравьи позиционируются с абсолютным значением. Более того, когда запускается анимация каждого муравья, ключевой кадр изменяет положение и поворот каждого муравья. Таким образом, голодные муравьи ползают по сахарному эффекту, который вы видите выше.

Автор

Стивен Фэрбенкс
codepen.io

CSS-анимация Noir Shadow

ANoir Shadow CSS-анимация

О проекте

CSS-анимация Noir Shadow

CSS-анимация Noir Shadow — это анимация на codepen.io, созданный из CSS и HTML. Анимация демонстрирует использование теней текста, чтобы отбрасывать тень на текст при колебаниях света. В этом примере используются 3 анимации ключевых кадров CSS. Первая анимация анимирует колебание света с помощью преобразования поворота. Вторая анимация анимирует градиент за текстом. В последней анимации используется преобразование scaleY и преобразование наклона CSS-тени для создания эффекта движущейся тени.

Автор

Стивен Фэрбенкс

Кодовое обозначение

.io

Подводная чистая CSS-анимация

Подводная чистая CSS-анимация

О проекте

Подводная чистая CSS-анимация

Подводная чистая CSS-анимация — это проект на codepen.io, в котором автор создал движущееся изображение, отображающее жизнь под водой. океан. В этом примере для создания этого эффекта используется чуть менее 2000 строк кода стиля, и в него загружаются правила ключевого кадра. Фактически, эта анимация состоит из 3 частей: плавающих китов, пузырей и преломления света от солнца в океан.В результате этот проект вкладывает значительные средства в свойства CSS transform translate для создания движущихся частей. Кроме того, в этом примере используется анимация ключевых кадров WebKit для нацеливания на более широкий выбор механизмов рендеринга браузера.

Как остановить зацикливание анимации по ключевым кадрам с помощью CSS3?

Аноним А.ответил • 13.01.20

CSS Эксперт с более чем 10-летним опытом

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

Синтаксис выглядит следующим образом:

animation-fill-mode: forward;

Вот как это выглядит в полном объявлении анимации (взято из Mozilla Developer Network):

HTML

Он растет и остается большим.

CSS

@keyframes grow {

0% {размер шрифта: 0; }

100% {размер шрифта: 40 пикселей; }

}

. Растет и остается {

имя-анимации: расти;

продолжительность анимации: 3 с;

animation-fill-mode: вперед; / * Это объявление останавливает цикл анимации. * /

}

Вот демонстрация JSFiddle: https://jsfiddle.net/7da4gqzy/

Дополнительная информация о MDN: https: // developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

Все еще ищете помощь? Получите правильный ответ быстро.

ИЛИ

Найдите онлайн-репетитора сейчас

Выберите эксперта и познакомьтесь онлайн.
Никаких пакетов или подписок, платите только за необходимое время.

¢
€
£
¥
‰
µ
·
•
§
¶
SS
‹
›
«
»
< >
≤
≥
—
—
¯
‾
¤
¦
¨
¡
¿
ˆ
˜
°
—
±
÷
⁄
×
ƒ
∫
∑
∞
√
∼
≅
≈
≠
≡
∈
∉
∋
∏
∧
∨
¬
∩
∪
∂
∀
∃
∅
∇
*
∝
∠
´
¸
ª
º
†
‡
А
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Я
Я
Я
Я
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Œ
Š
Ù
Ú
Û
Ü
Ý
Ÿ
Þ
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
я
я
я
я
ð
ñ
ò
ó
ô
х
ö
ø
œ
š
ù
ú
û
ü
ý
þ
ÿ
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
Λ
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
κ
λ
μ
ν
ξ
ο
π
ρ
ς
σ
τ
υ
φ
χ
ψ
ω
ℵ
ϖ
ℜ
ϒ
℘
ℑ
←
↑
→
↓
↔
↵
⇐
⇑
⇒
⇓
⇔
∴
⊂
⊃
⊄
⊆
⊇
⊕
⊗
⊥
⋅
⌈
⌉
⌊
⌋
〈
〉
◊

Когда и как использовать CSS-анимацию

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

Чтобы получить правильную анимацию, у нас было два варианта: использовать Javascript, или CSS.

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

Устойчивость

Правила

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

Функциональность

С точки зрения функциональности CSS и Javascript достаточно похожи.

Хотя анимация Javascript обеспечивает значительный контроль над анимацией — пауза, остановка, возврат, запуск асинхронно одна за другой, размещение на временной шкале и расписании.

Производительность

Производительность — еще одно важное соображение, когда вы планируете разработать свою программу на мобильных платформах. В целом, CSS имеет относительно хорошую производительность, поскольку он выгружает логику анимации на сам браузер, благодаря чему он позволяет браузеру оптимизировать взаимодействие с DOM и потребление памяти и, что наиболее важно, использует графический процессор для повышения производительности.С другой стороны, производительность Javascript может варьироваться от достаточно высокой до гораздо более низкой, чем у CSS. Производительность Javascript зависит от используемой библиотеки и ложится бременем на разработчика по оптимизации.

Оптимизация

CSS-анимация лучше с точки зрения оптимизации. Фактически, они работают на графическом процессоре, поэтому частота кадров намного выше, чем у Javascript-анимаций. С другой стороны, CSS-анимация не вызывает перекомпоновки и перерисовки, в отличие от изменения элементов с помощью Javascript.

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

Кроме того, для работы с ключевыми кадрами нам потребовалась поддержка следующих свойств CSS:

Преобразование

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

Есть четыре важных аспекта преобразований:

translate: Функция translate () позволяет нам перемещать элемент по плоскости (по осям x и y).

scale: Функция scale () позволяет нам на изменить размер элемента . Мы можем как расширить, так и сжать его.

rotate: Функция rotate () позволяет нам заставить элемент вращаться вокруг фиксированной точки .По умолчанию он вращается вокруг центра элемента.

Skew: Функция skew () позволяет исказить элемент , перетаскивая его стороны вдоль линии.

Переход

Как следует из названия, переход позволяет управлять преобразованием элементов. Это помогает сделать процесс плавным и постепенным. С другой стороны, если у вас его нет, трансформируемый элемент резко изменит одну форму на другую. Более того, он широко используется для простой анимации и может применяться к большинству свойств CSS.

Полный список свойств CSS, которые можно анимировать с помощью перехода, можно найти здесь.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Свойства анимации

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

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

Правило @keyframes

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

/ * Стандартный синтаксис * /

@keyframes animate {

от {top: 0px; фон: зеленый; width: 100px;}

От

до {top: 200px; фон: черный; width: 300px;}

}

Чтобы обеспечить оптимальную поддержку браузером ключевых кадров CSS, вы должны определить как 0%, так и 100% селекторы:

/ * Стандартный синтаксис * / @keyframes animate {0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px;} 100% {top: 100px;}

}

Мы можем создавать сложные анимационные свойства, используя @keyframe. Простая анимация имеет два ключевых кадра, а сложная анимация — несколько ключевых кадров.

Полный список свойств субанимации можно найти по адресу:

https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Приступим к работе над нашими требованиями. Для начала создадим базовый карточный макет.

Шаг 1

Мы создадим простой макет из двух карточек и добавим анимацию на шаге 2, используя ключевые кадры. Поскольку мы можем легко применить переход к свойству CSS «position», мы можем использовать его для размещения элементов по мере необходимости.

https://codepen.io/pen/NWbBrRb

Шаг 2

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

Теперь давайте добавим ключевые кадры для названия анимации.

@keyframes card-animation {

из {

непрозрачность: 0;

осталось: 0;

}

по {

непрозрачность: 1;

}

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

Шаг 3

Теперь наш ключевой кадр готов, давайте добавим его в класс .card вместе с animation-fill-mode.

анимация: карточная анимация 1с;

animation-fill-mode: вперед;

Нам нужно будет добавить задержку, чтобы анимировать карты одну за другой.

.card-1 {

задержка анимации: 2 с;

}

.card-2 {

задержка анимации: 3 с;

}

Вот и все! С помощью приведенного выше простого кода у нас есть анимация рабочей карты.

https://codepen.io/pen/ExNpyBz

Шаг 4

Чтобы обновить его в соответствии с нашими требованиями, давайте добавим к нему еще 2 карты и применим ту же задержку анимации, которую мы использовали на предыдущем шаге.

.card-3 {

задержка анимации: 4 с;

}

.card-4 {

задержка анимации: 5 с;

}

Давайте посмотрим, как это работает.

https://codepen.io/pen/zYoLOYo

Заключение

Подводя итог, используйте CSS-анимацию для более простых «одноразовых» переходов, таких как переключение состояний элементов пользовательского интерфейса.Кроме того, его проще использовать, чем JavaScript, поскольку он позволяет создавать впечатляющие анимации с точки зрения пользователей. Используйте анимацию JavaScript, если вам нужны дополнительные эффекты, такие как подпрыгивание, остановка, пауза, перемотка назад или замедление. Это дает вам больше контроля, чем CSS.

W3C работает над новой спецификацией под названием «Веб-анимация», которая направлена на устранение многих недостатков в CSS-анимации и CSS-переходах, обеспечивая улучшенные элементы управления во время выполнения и дополнительные функции. То есть нам придется подождать и посмотреть, как все сложится.