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; ) )Каждое @keyframesat-правило определяет, что должно происходить в определенные моменты анимации. Например, 0% - это начало анимации, а 100% - конец. Затем этими ключевыми кадрами можно управлять либо с помощью сокращенного animationсвойства, либо его восьми под-свойств, чтобы обеспечить больший контроль над тем, как следует управлять этими ключевыми кадрами.
Подсвойства
animation-name: объявляет имя@keyframesat-правила, которым нужно управлять.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 | Икс |
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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 4 * | 5 * | 10 | 12 | 5.1 * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 6.0-6.1 * |
Дополнительная информация
- анимация на MDN
- Использование CSS-анимации
- анимация на W3C
- Jank busting для лучшей производительности рендеринга
- Веб-анимация на работе
- Пять способов ответственно анимировать
- Скачок состояния, отрицательные задержки, анимация начала координат и многое другое
- Запуск CSS-анимации на полпути
- Анимация высокой производительности