Анімація - CSS-хитрощі

Anonim

animationВластивість в CSS можна використовувати для морського багатьох інших властивостей CSS , такі як color, background-color, height, або width. Кожну анімацію потрібно визначити за допомогою @keyframesправила at, яке потім викликається із animationвластивістю, приблизно так:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Кожне @keyframesправило визначає, що має відбуватися в конкретні моменти під час анімації. Наприклад, 0% - це початок анімації, а 100% - кінець. Потім цими ключовими кадрами можна керувати або за допомогою скороченого animationвластивості, або його восьми підвластивостей, щоб надати більше контролю над тим, як слід керувати цими ключовими кадрами.

Підвластивості

  • animation-name: оголошує назву @keyframesправила, яким потрібно маніпулювати.
  • animation-duration: тривалість часу, необхідного анімації для завершення одного циклу.
  • animation-timing-function: встановлює попередньо задані криві прискорення, такі як easeабо linear.
  • animation-delay: час між завантажуваним елементом та початком послідовності анімації (круті приклади).
  • animation-direction: встановлює напрямок анімації після циклу. Його значення за замовчуванням скидається для кожного циклу.
  • animation-iteration-count: кількість разів, коли потрібно виконати анімацію.
  • animation-fill-mode: встановлює, які значення застосовуються до / після анімації.
    Наприклад, ви можете встановити, щоб останній стан анімації залишався на екрані, або ви можете повернути його до того, коли анімація починалася.
  • animation-play-state: пауза / відтворення анімації.

Потім ці підвластивості можна використовувати так:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

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

animation-timing-function легкість, легкість, легкість, легкість у виїзді, лінійна, кубічна-безьє (x1, y1, x2, y2) (наприклад, кубічна-безіє (0,5, 0,2, 0,3, 1,0))
animation-duration Xs або Xms
animation-delay Xs або Xms
animation-iteration-count X
animation-fill-mode вперед, назад, обидва, жодного
animation-direction нормальний, почерговий
animation-play-state пауза, біг, біг

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

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

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

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

Ви можете розділити значення комами, щоб також оголосити кілька анімацій на селекторі. У наведеному нижче прикладі ми хочемо змінити колір кола, @keyframeодночасно штовхаючи його з боку в бік іншим.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Продуктивність

Анімація більшості властивостей є проблемою щодо продуктивності, тому перед анімуванням будь-яких властивостей слід діяти обережно. Однак існують певні комбінації, які можна безпечно анімувати:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Які властивості можна анімувати?

MDN має перелік властивостей CSS, які можна анімувати. Анімаційні властивості мають тенденцію до кольорів та цифр. Прикладом властивості, що не є анімаційною, є background-image.

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

Дані про підтримку веб-переглядача подані компанією 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
  • Використання CSS-анімації
  • анімація на W3C
  • Перебої з перебоями для кращої продуктивності візуалізації
  • Веб-анімація на роботі
  • П’ять способів відповідально оживити
  • Стрибки штатів, негативні затримки, анімаційне походження тощо
  • Запуск анімації CSS посередині
  • Високопродуктивна анімація