CSS анімація (CSS animation & @keyframes)
- Налаштування Sublime Text 3
- Шаблон заявки на замовлення
- CSS властивість background
- CSS властивість position
- Шпаргалка з FLEX
- Одиниці вимірювання CSS
- Застосування класу "ibg"
- CSS властивість transition
- Animation та @keyframes
- Шпаргалка Slick Slider
- Шпаргалка CSS Transform
- Шпаргалка CSS Grid
- Gulp сценарій
- Зарезервовані слова JS
Що таке 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
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,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: 2; animation-direction: normal;}
/* ключові кадри */@keyframes circle{
0%{ left: 0%; } 50%{ border-radius: 0%; } 100%{ left: 50%; }}
Або (універсальний запис):
/* селектор */
.animation__circle{
/* всі ті самі стилі селектора */ animation: circle 1s linear 2 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: 2; animation-direction: reverse;}
/* ключові кадри */@keyframes circle{
0%{ left: 0%; } 50%{ border-radius: 0%; } 100%{ left: 50%; }}
Або (універсальний запис):
/* селектор */
.animation__circle{
/* всі ті самі стилі селектора */ animation: circle 1s linear 2 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: 2; animation-direction: alternate;}
/* ключові кадри */@keyframes circle{
0%{ left: 0%; } 50%{ border-radius: 0%; } 100%{ left: 50%; }}
Або (універсальний запис):
/* селектор */
.animation__circle{
/* всі ті самі стилі селектора */ animation: circle 1s linear 2 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: 2; animation-direction: alternate-reverse;}
/* ключові кадри */@keyframes circle{
0%{ left: 0%; } 50%{ border-radius: 0%; } 100%{ left: 50%; }}
Або (універсальний запис):
/* селектор */
.animation__circle{
/* всі ті самі стилі селектора */ animation: circle 1s linear 2 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: 2; 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 2 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: 2; 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 2 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: 2; 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 2 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: 2; 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 2 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: 2; 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 2 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 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;}
/* всі ті самі стилі селектора */
Повернутися назад
