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

Что такое CSS анимация?

Как и CSS свойство плавных переходов transition, о котором мы говорили в предыдущем уроке, свойство animation призвано сделать нашу верстку более динамичной, оживить её для лучшего взаимодействия с пользователем и создания WOW эффекта.

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

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

Шпаргалка CSS свойств которые можно анимировать
  • -moz-outline-radius
  • -moz-outline-radius-bottomleft
  • -moz-outline-radius-bottomright
  • -moz-outline-radius-topleft
  • -moz-outline-radius-topright
  • -webkit-line-clamp
  • -webkit-text-fill-color
  • -webkit-text-stroke
  • -webkit-text-stroke-color
  • all
  • backdrop-filter
  • background
  • background-color
  • background-position
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-width
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image-outset
  • border-image-slice
  • border-image-width
  • border-left
  • border-left-color
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-width
  • border-start-end-radius
  • border-start-start-radius
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • caret-color
  • clip
  • clip-path
  • color
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-width
  • columns
  • filter
  • flex
  • flex-basis
  • flex-grow
  • flex-shrink
  • font
  • font-size
  • font-size-adjust
  • font-stretch
  • font-variation-settings
  • font-weight
  • gap
  • grid-column-gap
  • grid-gap
  • grid-row-gap
  • grid-template-columns
  • grid-template-rows
  • height
  • inset
  • inset-block
  • inset-block-end
  • inset-block-start
  • inset-inline
  • inset-inline-end
  • inset-inline-start
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • mask
  • mask-border
  • mask-position
  • mask-size
  • max-height
  • max-lines
  • max-width
  • min-height
  • min-width
  • object-position
  • offset
  • offset-anchor
  • offset-distance
  • offset-path
  • offset-position
  • offset-rotate
  • opacity
  • order
  • outline
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • perspective
  • perspective-origin
  • right
  • rotate
  • row-gap
  • scale
  • scroll-margin
  • scroll-margin-block
  • scroll-margin-block-end
  • scroll-margin-block-start
  • scroll-margin-bottom
  • scroll-margin-inline
  • scroll-margin-inline-end
  • scroll-margin-inline-start
  • scroll-margin-left
  • scroll-margin-right
  • scroll-margin-top
  • scroll-padding
  • scroll-padding-block
  • scroll-padding-block-end
  • scroll-padding-block-start
  • scroll-padding-bottom
  • scroll-padding-inline
  • scroll-padding-inline-end
  • scroll-padding-inline-start
  • scroll-padding-left
  • scroll-padding-right
  • scroll-padding-top
  • scroll-snap-coordinate
  • scroll-snap-destination
  • scrollbar-color
  • shape-image-threshold
  • shape-margin
  • shape-outside
  • tab-size
  • text-decoration
  • text-decoration-color
  • text-decoration-thickness
  • text-emphasis
  • text-emphasis-color
  • text-indent
  • text-shadow
  • text-underline-offset
  • top
  • transform
  • transform-origin
  • translate
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index
  • zoom

CSS свойства:

animation-name

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

Имя
none

Связываем селектор animation__circle с ключевыми кадрами circle.

CSS код:
/* селектор */

.animation__circle{

width: 100px; height: 100px; border-radius: 50%; background-color: #5e5373; position: relative; animation-name: circle;

}

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

@keyframes circle{

0%{ /* css свойства */ } 100%{ /* css свойства */ }

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

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

Отмеяем анимацию селектора animation__circle.

CSS код:
/* селектор */

.animation__circle{

width: 100px; height: 100px; border-radius: 50%; background-color: #5e5373; position: relative; animation-name: none;

}

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

@keyframes circle{

0%{ /* css свойства */ } 100%{ /* css свойства */ }

}

Или (универсальная запись):
/* селектор */

.animation__circle{

/* все те же стили селектора */ animation: none;

}

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

animation-duration

Отвечает за продолжительность анимации

1s
2.5s
500ms
Запустить

Переход будет длится 1 секунду

CSS код:
/* селектор */

.animation__circle{

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

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Переход будет длится 2.5 секунды

CSS код:
/* селектор */

.animation__circle{

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

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Переход будет длится 500 миллисекунд

CSS код:
/* селектор */

.animation__circle{

width: 100px; height: 100px; border-radius: 50%; background-color: #5e5373; position: relative; animation-name: circle; animation-duration: 500ms;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

/* все те же стили селектора */ animation: circle 500ms;

}

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

animation-timing-function

Задаёт сценарий развития анимации между ключевыми кадрами

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-bezier
Пользовательские функции cubic Bézier с сайта easings.net
Название Значение функции
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo cubic-bezier(1, 0, 0, 1)
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)
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);

}

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

ANIMATION-ITERATION-COUNT

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

1 по умолчанию
3
2.5
infinite
Запустить

Ключевые кадры проиграются 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; animation-iteration-count: 1;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Ключевые кадры проиграются 3 раза

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; animation-iteration-count: 3;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Ключевые кадры проиграются 2.5 раза

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; animation-iteration-count: 2.5;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Ключевые кадры будут проигрываться бесконечно

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; animation-iteration-count: infinite;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

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

ANIMATION-DIRECTION

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

normalпо умолчанию
reverse
alternate
alternate-reverse
Запустить

Ключевые кадры проиграются так как они написаны

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; animation-iteration-count: infinite; animation-direction: normal;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Кадры будут проигрываться в обратном порядке

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; animation-iteration-count: infinite; animation-direction: reverse;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

каждый четный проход по кадрам будет проигрываться в обратном порядке.

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; animation-iteration-count: infinite; animation-direction: alternate;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

каждый нечетный проход по кадрам будет проигрываться в обратном порядке.

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; animation-iteration-count: infinite; animation-direction: alternate-reverse;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

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

ANIMATION-PLAY-STATE

Позволяет запускать или останавливать анимацию по событию

runningпо умолчанию
paused
Запустить

анимация проигрывается

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; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

при наведении анимация на паузе

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; animation-iteration-count: infinite; animation-direction: normal;

}

/* при наведении */

.animation__circle:hover{

animation-play-state: paused;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* при наведении */

.animation__circle:hover{

animation-play-state: paused;

}

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

ANIMATION-DELAY

Отвечает за задержку перед проигрыванием

0sпо умолчанию
1s
200ms
Запустить

Задержки нет

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; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; animation-delay: 0s;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Задержка 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; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; animation-delay: 1s;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить

Задержка 200 миллисекунд

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; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; animation-delay: 200ms;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

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

ANIMATION-FILL-MODE

Определяет какие значения анимируемых css свойств применятся к объекту после завершения анимации

noneпо умолчанию
forwards
backwards
both
Запустить
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; animation-iteration-count: 1; animation-direction: normal; animation-play-state: running; animation-delay: 0s; animation-fill-mode: none;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить
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; animation-iteration-count: 1; animation-direction: normal; animation-play-state: running; animation-delay: 0s; animation-fill-mode: forwards;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить
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; animation-iteration-count: 1; animation-direction: normal; animation-play-state: running; animation-delay: 0s; animation-fill-mode: backwards;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

/* те же ключевые кадры */
Запустить
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; animation-iteration-count: 1; animation-direction: normal; animation-play-state: running; animation-delay: 0s; animation-fill-mode: both;

}

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

@keyframes circle{

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

}

Или (универсальная запись):
/* селектор */

.animation__circle{

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

}

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

Шпаргалка является дополнением к выпуску «CSS анимация (CSS animation & @keyframes)»