★ Рубрика: Кодинг

Пример css-анимации

Здесь приведен простой учебный пример анимации на чистом css. Готовый код примера приведен ниже. Также можно посмотреть саму анимацию - движущийся квадрат. «Анимация» в CSS всегда сводилась к hover-эффектам. С помощью псевдоклассов :hover и :focus мы могли изменять цвет, размер и положение элемента, цвет фона и другие свойства CSS, основываясь на действиях пользователя.

Используя :hover, вы получаете всего два положения: с наведенным курсором и с не наведенным, иначе говоря, только два ключевых кадра: начальный и конечный, никаких промежуточных состояний межу этими положениями, и, как результат, резкий и внезапный переход между ними. По сути дела, это никакая не анимация. Переходы CSS3 transitions решили задачу промежуточных состояний, позволив переходить из не наведенного состояния к наведенному в течение определенного промежутка времени. Transitions с вендорными префиксами отлично поддерживаются современными браузерами (начиная с IE10 и Firefox 4.0). Используя transitions, можно создавать простые анимации, ограниченные двумя ключевыми кадрами — начальной и конечной точками — и единичным повтором. Большинство разработчиков преодолевают эти ограничения, применяя для анимации JavaScript. С тех пор, как ситуация с поддержкой анимаций CSS3 браузерами улучшилась, пришла пора меньше полагаться на JavaScript и создавать анимацию уже непосредственно в CSS.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
 width: 100px;
 height: 100px;
 background-color: red;
 position: relative;
 -webkit-animation-name: example; /* Chrome, Safari, Opera */
 -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
 -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
 -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
 animation-name: example;
 animation-duration: 4s;
 animation-iteration-count: 3;
 animation-direction: reverse; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
 0% {background-color:red; left:0px; top:0px;}
 25% {background-color:yellow; left:200px; top:0px;}
 50% {background-color:blue; left:200px; top:200px;}
 75% {background-color:green; left:0px; top:200px;}
 100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
 0% {background-color:red; left:0px; top:0px;}
 25% {background-color:yellow; left:200px; top:0px;}
 50% {background-color:blue; left:200px; top:200px;}
 75% {background-color:green; left:0px; top:200px;}
 100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Важно:</b>Этот пример не работает 
в Internet Explorer 9 и более ранних версиях.</p>

<div></div>

</body>
<⁄html>

Похожие публикации: css, анимация

Войти и комментировать [ Вход | Регистрация ]