Правило @keyframes открывает перед разработчиками удивительные возможности для создания динамичных анимаций. По сути, это плавный переход от одного набора CSS-стилей к другому, где вы можете менять параметры столько раз, сколько душе угодно!
Мгновенно определить момент изменения можно с помощью процентов или ключевых слов "from" и "to", которые соответствуют значениям 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 { /* Firefox */ 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 { /* Safari и Chrome */ 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 pЭтот пример не работает в браузерах Internet Explorer и Opera./p div*/div /body /html Вот что получится в итоге:
Этот пример не работает в браузерах Internet Explorer и Opera.