CSS анимация

Большинство современных браузеров теперь поддерживает анимацию CSS. Да, CSS теперь позволяет Вам создавать некоторую простую анимацию без помощи языка программирования JavaScript.

Следующий пример показывает, как произвести цветовое изменение фона. Как Вы можете видеть, мы должны (пока) использовать некоторые собственные свойства, такие как-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>

Категория: CSS | Добавлено: 17 Мая 2015 10:54:09 | Пользователь: Андрей Ковальчук

Ссылка: