У минулій статті ми робили короткий огляд CSS-переходів, а в цьому пості проведемо ознайомлювальний рейд по корисним, як я сподіваюся, питанням CSS-анімації. Ці дві нові властивості в CSS3 дозволяють створювати на сайті привабливу і «магічну» інтерактивність, навіть без використання JavaScript. Також, в сьогоднішньому пості, розглянемо практичний приклад застосування властивості animation в CSS.
Анімація в CSS3 вже сьогодні використовується практично всіма сучасними веб-дизайнерами, незважаючи на більш високі стандарти і вимоги до браузерів.
Оскільки ці нововведення для багатьох залишилися незрозумілими, за допомогою даного посту ми спробуємо пролити світло на них.
Якщо CSS-переходи пов’язані зі зміною властивостей елемента при переході із одного стану в інший, то CSS-анімація залежить від ключових кадрів і властивостей анімації. За допомогою CSS-анімації можна створювати ефекти, які будуть автоматично запускатися і повторюватися в заданому проміжку часу.
@keyframes
) і визначають те, як елемент буде анімований.
Анімація в CSS може застосовуватися практично до всіх елементів в HTML5 (включаючи псевдо елементи :before
та :after
).
animation
присвоюється певному блокові в його «спокійному» (звичайному) стані за допомогою властивостей анімації, які можна використовувати для анімації багатьох властивостей CSS (наприклад, колір фону, висота або ширина). Поведінка анімації визначається за допомогою правил в ключових кадрах (@keyframes
).
Є вісім властивостей animation
(в алфавітному порядку):
animation-delay
– задає затримку перед початком анімації, в секундахanimation-direction
– вказує на те, чи повинна анімація відтворюватися в зворотному або чергованому циклах (reverse або alternate)animation-duration
– визначає те, скільки секунд або мілісекунд потрібно анімації для завершення одного циклуanimation-fill-mode
– стиль для елемента, коли анімація не відтворюється. Наприклад, коли анімація завершилася або у неї задана затримкаanimation-iteration-count
– задає кількість разів, яку має відтворюватися анімація (infinite – для нескінченної кількості разів)animation-name
– визначає ім’я @keyframes
анімаціїanimation-play-state
– вказує на те, чи запущена анімація або припинена (running або paused)animation-timing-function
– визначає криву швидкості анімації
Весь синтаксис властивостей анімації виглядає так:
div { animation-name: тут назва для ключових кадрів; animation-duration: тривалість анімації в секундах або мілісекундах; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; }
А короткий запис властивостей анімації виглядає так:
div { animation: nazva-animaciyi 1.5s ease-out 0s alternate infinite none running; }
Властивості записуються без ком, бажано в порядку слідування властивостей. При цьому, якщо деякі властивості не вказати, будуть задіяні властивості за замовчуванням. Якщо потрібно присвоїти одному елементу кілька різних ключових кадрів, тоді між властивостями ставиться кома.
Зразок синтаксису ключових кадрів @keyframes
виглядає так:
@keyframes [назва анімації] { 0% {/* початковий кадр */ [властивість CSS]: [значення властивості]; } 100% {/* фінальний кадр */ [властивість CSS]: [значення властивості]; } }
У правилах @keyframes
можна використовувати більше двох (початкового і фінального) ключових кадрів (наприклад, проміжні в позначці 30%, 75% і т.д.). Також в кожному ключовому кадрі можна вказувати досить велику кількість властивостей CSS.
Нижче представлений практичний приклад CSS коду для створення анімації великого червоного кола.
div { background-color: red; border-radius: 50%; height: 250px; width: 250px; margin: 50px; animation: pulsuvannya 2s ease infinite; } @keyframes pulsuvannya { 0% { transform: scale (1); } 50% { transform: scale (1.3); } 100% { transform: scale (1); } }
Демо-приклад коду:
Дивіться більше прикладів анімації в CSS з допомогою ключових кадрів keyframes у нашому практичному уроці.
Практично всі сучасні браузери підтримують цю властивість, але для більшої сумісності потрібно використовувати префікси браузерів, причому стандартний синтаксис оголошується останнім. Це відноситься і до властивості animation, і до правил ключових кадрів keyframes:
div { -webkit-animation: [назва кейфрейма] 3s infinite; -moz-animation: [назва кейфрейма] 3s infinite; -o-animation: [назва кейфрейма] 3s infinite; animation: [назва кейфрейма] 3s infinite; } @-webkit-keyframes [назва кейфрейма] { 0% {opacity: 0; } 100% {opacity: 1; } } @-moz-keyframes [назва кейфрейма] { 0% {opacity: 0; } 100% {opacity: 1; } } @-o-keyframes [назва кейфрейма] { 0% {opacity: 0; } 100% {opacity: 1; } } @keyframes [назва кейфрейма] { 0% {opacity: 0; } 100% {opacity: 1; } }
Дякую за увагу!
Коротке визначення Чорного SEO Чорне СЕО (або Чорна оптимізація) — це будь-яка практика, метою якої…
Отримання прав водія категорії C відкриває двері до професійної діяльності, пов'язаної з керуванням вантажними автомобілями.…
Вихід айфонів 15 і 16 покоління — не привід забути про пристрої 14-го ряду моделей,…
Дуже неприємно виходить, коли ви доклали багато зусиль, праці та сил, щоб створити картинку, а…
Переважну частку всього світового веб-трафіку займає трафік з мобільних пристроїв (включно з планшетами), тож цей…