CSS анимация
Большинство современных браузеров теперь поддерживает анимацию CSS. Да, CSS теперь позволяет Вам создавать некоторую простую анимацию без помощи языка программирования JavaScript.
Следующий пример показывает, как произвести цветовое изменение фона. Как Вы можете видеть, мы должны (пока) использовать некоторые собственные свойства, такие как-moz-keyframes.
Теперь создайте блок div и посмотрите что произойдет.
Следующий пример показывает, как произвести цветовое изменение фона. Как Вы можете видеть, мы должны (пока) использовать некоторые собственные свойства, такие как-moz-keyframes.
#logo {
margin: 15px 15px 0 15px;
background: red;
float: left;
/* Firefox 4+ */
-moz-animation-name: colour-change;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
/* Webkit */
-webkit-animation-name: colour-change;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
}
@-moz-keyframes colour-change {
0% { background: red; }
33% { background: green; }
66% { background: blue; }
}
@-webkit-keyframes colour-change {
0% { background: red; }
33% { background: green; }
66% { background: blue; }
}Теперь создайте блок div и посмотрите что произойдет.
<div id=”logo”> Изменение цвета фона! </div>