Синтаксис анімації ключових кадрів - CSS-хитрощі

Anonim

Основна декларація та використання

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Для стислості решта коду на цій сторінці не використовуватиме жодних префіксів, але в реальному світі слід використовувати всі префікси постачальників зверху

Кілька кроків

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Якщо анімація має однакові початкові та кінцеві властивості, один із способів це розділити комами значення 0% та 100%:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Або ви завжди можете сказати анімації запускатися двічі (або будь-яку парну кількість разів) і сказати напрямок alternate.

Виклик анімації ключового кадру з окремими властивостями

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Стенографія анімації

Просто розділіть пробілом усі окремі цінності. Порядок не має значення, крім випадків, коли використовується як тривалість, так і затримка, вони повинні бути в такому порядку. У прикладі нижче 1s = тривалість, 2s = затримка, 3 = ітерації.

animation: test 1s 2s 3 alternate backwards

Поєднайте перетворення та анімацію

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Кілька анімацій

Ви можете розділити значення комами, щоб оголосити кілька анімацій на селекторі.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Кроки ()

Функція steps () контролює, скільки ключових кадрів буде відображатись за час анімації. Скажімо, ви заявляєте:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Якщо ви використовуєте кроки (10) у своїй анімації, це забезпечить лише 10 ключових кадрів за відведений час.

.move ( animation: move 10s steps(10) infinite alternate; )

Там математика добре працює. Кожну секунду елемент рухатиметься на 10 пікселів ліворуч і 10 пікселів вниз до кінця анімації, а потім знову назавжди назавжди.

Це може бути чудово для анімації спрайтів, як ця демонстрація від simurai.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
4 * 5 * 10 12 5,1 *

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Більше ресурсів

  • Документи MDN
  • MDN: Використання анімації CSS
  • Чи можу я використовувати - Підтримка браузера
  • ВІДЕО: Вступ до анімації CSS