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
Определяет список применяемых к элементу анимаций (ключевых кадров). Можно указать через запятую. Причем приоритет у последней записи.
Связываем селектор 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
Отвечает за продолжительность анимации.
Запустить
Переход будет длиться 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
Задаёт сценарий развития анимации между ключевыми кадрами.
Запустить
Переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует 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 раз.
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
Определяет направление и тип проигрывания ключевых кадров.
Запустить
Ключевые кадры проиграются так, как они написаны.
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
Позволяет запускать или останавливать анимацию по событию.
Запустить
Анимация проигрывается.
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
Отвечает за задержку перед проигрыванием.
Запустить
Задержки нет.
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 свойств применятся к объекту после завершения анимации.
Запустить
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 infinite 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 infinite 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 infinite 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 infinite normal running 0s both;}
/* те же ключевые кадры */