С помощью правила @keyframes можно создавать потрясающую анимацию.
Анимация формируется путём плавного перехода от одного набора CSS-стилей к другому, создавая эффект живого движения.
Во время анимации вы можете менять набор стилей столько раз, сколько захотите – это даёт невероятную гибкость.
Указывайте момент изменения в процентах или с помощью ключевых слов from и to, которые означают 0 % и 100 % соответственно.
0 % обозначает начало анимации, 100 % – её завершение.
Для лучшей совместимости с браузерами всегда задавайте два селектора - 0 % и 100 %.
Используйте свойства анимации, чтобы управлять процессом и привязывать его к нужным селекторам.
| Значение | Описание |
|---|
| имя_анимации | Обязательный параметр. Определяет название анимации. |
| селектор-ключевого-кадра | Обязательный параметр, указывается в процентах от продолжительности анимации.
Допустимые значения:
0-100%
from (то же, что 0%)
to (то же, что 100%)
Замечание: вы можете задавать несколько селекторов ключевого кадра в одной анимации. |
| css-стили | Обязательный параметр. Один или более допустимых свойств CSS-стилей. |
Пример<html><head> <style type="text/css"> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 4s infinite; -moz-animation: mymove 4s infinite; /* Firefox */ -webkit-animation: mymove 4s infinite; /* Safari и Chrome */ } @keyframes mymove { 0% { top: 0px; left: 0px; background: red; } 25% { top: 0px; left: 530px; background: blue; } 50% { top: 100px; left: 530px; background: yellow; } 75% { top: 100px; left: 0px; background: green; } 100% { top: 0px; left: 0px; background: red; } } @-moz-keyframes mymove { 0% { top: 0px; left: 0px; background: red; } 25% { top: 0px; left: 530px; background: blue; } 50% { top: 100px; left: 530px; background: yellow; } 75% { top: 100px; left: 0px; background: green; } 100% { top: 0px; left: 0px; background: red; } } @-webkit-keyframes mymove { 0% { top:0px; left: 0px; background: red; } 25% { top:0px; left: 530px; background: blue; } 50% { top:100px; left: 530px; background: yellow; } 75% { top:100px; left: 0px; background: green; } 100% { top:0px; left: 0px; background: red; } } </style></head><body> Этот пример не работает в браузерах Internet Explorer и Opera.
<div></div></body></html>Результат данного примера:
Этот пример не работает в браузерах Internet Explorer и Opera.