Css keyframes animation: CSS3-анимация (свойство animation)

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, без воды и максимально просто

Автор статьи: admin

В этой статье будет про то как работает CSS анимация с использованием keyframes, всё написанное здесь, будет максимально простым, понятным и без воды.

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

Ещё смотрите статью Делаем простую анимацию через CSS transition, там вы научитесь делать анимацию используя transition.

Базовая работа с @keyframes:

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

Суть работы с @keyframes:

Суть работы с ним заключаться в том, что он сам @keyframes, просто задаёт когда и какое свойство нужно изменить и всё, для настройки времени анимации или сколько раз она будет проигрываться, используется свойства «animation-…».

Свойства «animation-…» для

@keyframes:

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

Это ещё не все свойства, ниже будут ещё, здесь только самые базовые.

Пример работы с

@keyframes:

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

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

Разбор кода:

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

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

Теперь что касается самой анимации, задаётся слово @keyframes, после него идёт имя анимации.

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

Что касается 50%, то это какие свойства будут использоваться, когда анимация проигралась на 50%, можно использовать 30%, 20%, 70%, это не важно, главное чтобы не меньше 0% и не больше 100%.

В to это конечное значение, какие свойства должны быть когда анимация закончит проигрываться, также его можно заменить 100%.

Более подробная работа с @keyframes:

В этой части статьи будут только новые свойства «animation-…» и всё, новых способов работы с @keyframes не будет.

Ещё больше свойств «animation-…» для

@keyframes:

• animation-direction — определяет, как должна воспроизводится анимация, вперёд, назад или переменно вперед и назад;
• animation-timing-function — это грубо говоря меняет задаёт как происходит анимация, про неё надо писать отдельно;

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

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

@keyframes:

Почти точно такой же блок div мы создаём и работаем с ним.

Тут только поменялся CSS.

Разбор кода:

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

Для animation-direction используется параметр alternate, который говорит, что анимация, после того как проиграется до конца, сразу же начнёт проигрываться в обратном порядке.

Для animation-timing-function используется параметр linear, который делает так, чтобы скорость анимации была равномерной, то есть не как по умолчания, сначала быстро, а потом медленно.

Больше тут не чего сказать.

Работа с @keyframes уровня бог:

Вот тут уже разберём кое что интересное.

Профессиональный пример работы с

@keyframes:

Тут почти не чего не поминалось, а HTML вообще не поменялся.

Разбор кода:

Вот тут всё уже по интереснее, как видите судя по свойству animation-name, мы применяем две анимации, одна отвечает за размер, вторая за цвет, задаём их через запятую.

Применять две анимации нужно для того, что бы, в разные моменты менять свойства, к примеру, как у нас, размер меняется только два раза, в 90% и к to, тогда как цвет меняется три раза, на 25%, 75% и к to.

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

Дополнительно про анимации:

Также есть свойство animation, оно позволяет задать все свойства для настройки анимации представленные выше, в одном свойстве.

Дополнительные свойства:

• animation-delay — Делает задержку перед проигрыванием анимации;

• animation-fill-mode — Определяет как нужно применять стили к элементу анимации, до и после применения;

• animation-play-state — Определяет состояние анимации, пауза или проигрыш;

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

Вывод:

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

Подписываетесь на соц-сети:

Также рекомендую:

Полезные ссылки для изучения CSS анимации / Хабр

Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.

CSS Анимация (CSS3 Animations)

Ищете базовую информацию по CSS3 анимации? Сайт W3 Schools обеспечит вас основными сведениями о правилах покадровой анимации @keyframes, поддержку браузерами, и различными доступными свойствами. Все это снабжено качественными и наглядными примерами.

Синтаксис покадровой анимации (Keyframe Animation Syntax)

Если вы уже знакомы с работой CSS3 анимации и вам нужна просто быстрая шпаргалка, то вам определенно стоит ознакомиться с соответствующей страницей на сайте Криса Койера CSS-Tricks. На ней можно найти множество примеров кода, который можно легко скопировать и вставить в свою таблицу стилей.

CSS3 Анимация (CSS3 Animations)

Ричард Бредшоу (Richard Bradshaw) составил крайне полезный сборник информации о различных аспектах CSS3 анимации. Страница по предлагаемой ссылке сфокусирована в основном на покадровой анимации @keyframes, но не пропустите также полезную информацию о переходах (transitions) и трансформациях (transforms) на том же сайте.

CSS Анимация: Принципы и Примеры (CSS Animation: Principles and Examples)

Эта углубленная статья на Smashing Magazine делает акцент на CSS3 анимацию, где используются традиционные принципы анимации, такие как сжимание и растяжение (‘squash and stretch’), которые помогают в создании более реалистических иллюзий.

Мастеркласс по CSS Анимации (A Masterclass in CSS Animation)

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

Начинаем эксперименты над CSS3 Анимацией (Start Experimenting with CSS3 Animations)

Ли Мунро (Lee Munroe) был на высоте в 2010-ом, когда он опубликовал в своем блоке статью о CSS3 анимации. Его пример был сфокусирован на вендорных префиксих вебкита, но сам синтаксис остался неизменным. Свою статью он оканчивает, приводя примеры со всего интернета.

Звенящий колокольчик с помощью покадровой CSS-анимации (Ring a Bell with CSS Keyframe Animations)

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

Развлекаемся с CSS анимацией (Having Fun with CSS Animations)

Самули Хакониеми (Samuli Hakoniemi) создал хитрых, но эффективный способ создания анимации с использованием правил @keyframes. Кроме того, что движущиеся прямоугольники и скачущие шары идеально подходят для изучения, демо вроде этой смогут помочь придумать замечательные идеи для применения этих анимаций в практике на ваших проектах в вебе.

Пятиминутное руководство по CSS Анимации (The Five-Minute Guide to CSS Animations)

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

Анимация с CSS: это легче, чем ты думаешь (Animation with CSS: It’s Easier Than You Think)

И наконец, хорошо отформатированная статья от Van SEO Design, которая предлагает обзор различных свойств и правил, которые вы возможно захотите использовать в вашей CSS анимации, и которая включает описание примеров кода для каждого из них.

Свойство animation-fill-mode — состояние анимации перед началом и после окончания

Свойство animation-fill-mode устанавливает в каком положении
останавливаться анимации после окончания. По умолчанию анимация возвращается
в первоначальное значение и это может выглядеть не очень красиво.

Синтаксис

селектор {
animation-fill-mode: backwards | forwards | both | none;
}

Значения

Значение по умолчанию: none.

Пример . Значение none

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Так как нет задержки animation-delay,
то элемент после загрузки страницы станет в 0px, а не в 300px.
Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение none

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Также для элемента установлена задержка
animation-delay в 3 секунды,
поэтому элемент после загрузки страницы станет в 300px, а не в 0px,
и будет стоять там 3 секунды после начала анимации
а потом скачком перейдет к 0px — и анимация начнется оттуда.
Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение backwards

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Также для элемента установлен
animation-fill-mode в значении backwards,
поэтому элемент после загрузки страницы станет в 0px, а не в 300px,
как это было для animation-fill-mode в значении none.
Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: backwards;
animation-delay: 0s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение none и количество повторений равно 1

В данном примере margin-left
установлен в значение 300px для элемента, а для первого кадра анимации —
в 0px. Также для элемента установлена задержка
animation-delay в 3 секунды,
поэтому элемент после загрузки страницы станет в 300px,
а не в 0px, и будет стоять там 3 секунды после начала анимации
а потом скачком перейдет к 0px — и анимация начнется оттуда.
Так как animation-fill-mode установлен в значении none,
то после проигрывания анимации элемент вернется в начальное значение:

<div></div>
@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: none;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение forwards и количество повторений равно 1

В данном примере animation-fill-mode установлен в значении forwards,
а число повторений анимации — в 1.
После проигрывания анимации элемент останется в том положении,
где закончилась анимация, а не прыгнет в исходную точку.

Кроме того, margin-left установлен в значение 300px для элемента,
а для первого кадра анимации —
в 0px. Также для элемента установлена задержка animation-delay в 3 секунды,
поэтому элемент после загрузки страницы станет в 300px, а не в 0px, и будет стоять там
3 секунды после начала анимации,
а потом скачком перейдет к 0px — и анимация начнется оттуда:

@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: forwards;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Пример . Значение both и количество повторений равно 1

В данном примере animation-fill-mode установлен в значении both,
а число повторений анимации — в 1.
После загрузки страницы элемент будет стоять в первом кадре анимации (в 0px, а не в 300px),
а после проигрывания анимации элемент останется в том положении,
где закончилась анимация, а не прыгнет в исходную точку:

@keyframes move {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}

#elem {
margin-left: 300px;
animation-fill-mode: both;
animation-delay: 3s;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: 1;
animation-timing-function: linear;
border: 1px solid black;
width: 50px;
height: 50px;
}

:

Смотрите также

• свойство animation-name,
  которое задает имя анимации
• свойство animation-duration,
  которое задает продолжительность анимации
• свойство animation-delay,
  которое задает задержку перед выполнением анимации
• свойство animation-timing-function,
  которое задает скорость выполнения анимации
• свойство animation-iteration-count,
  которое задает количество итераций анимации
• свойство animation-direction,
  которое задает направление анимации
• свойство animation-play-state,
  которое позволяет поставить анимацию на паузу
• свойство animation,
  представляющее собой сокращение для анимаций
• команду @keyframes,
  задающую ключевые кадры анимации
• плавные переходы transition,
  представляющие собой анимацию по наведению на элемент

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» , подготовленная редакцией проекта.

CSS Подсказка

Создавайте всплывающие подсказки с помощью CSS.

Демо: примеры подсказок

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

Базовая подсказка

Создать всплывающую подсказку, которая появляется, когда пользователь наводит указатель мыши на элемент:

Пример

/ * Контейнер подсказки * /
.tooltip {
position: relative;

дисплей: встроенный блок;
нижняя граница: 1 пиксель с точками
чернить; / * Если вы хотите, чтобы под парящим текстом появлялись точки * /
}

/ * Текст всплывающей подсказки
* /
.всплывающая подсказка .tooltiptext {
видимость: скрыто;
ширина: 120 пикселей;

цвет фона: черный;
цвет: #fff;
выравнивание текста: по центру;
отступ: 5px 0;
радиус границы: 6 пикселей;

/ * Поместите текст всплывающей подсказки — см. Примеры ниже! * /
позиция: абсолютная;
z-индекс: 1;
}

/ * Показать
текст всплывающей подсказки при наведении курсора на контейнер всплывающей подсказки * /
.tooltip: hover
.tooltiptext {
видимость: видимый;
}

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

Объяснение примера

HTML: Используйте элемент контейнера (например,

  .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%;}
}  

  .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;}
}  

  .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%;}
}  

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

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

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

 .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 градусов) 
} 
} 

  .mySelector {
  анимация: линейная 1000 мс myAnimationName;
}  

  .mySelector {
  функция времени анимации: линейная;
}  

  @keyframes move {
  25% {
    преобразовать: перевести (100%, 0%);
    функция времени анимации: легкость в;
  }
  50% {
    преобразовать: перевести (100%, 100%);
    функция времени анимации: линейная;
  }
  75% {
    преобразовать: перевести (0%, 100%);
    анимация-тайминговая функция: замедление;
  }
}
.mySelector {
  анимация: линейный бесконечный ход 5000 мс;
}