Статья №14
Задача
Анимировать картинку. На картинке электростанция и нам хочется, чтобы у нас на сайте была анимация, показывающая анатомию конструкции.
Решение
Готовим необходимое количество картинок. С помощью правила @keyframes описываем анимацию блока с картинкой. Механизм простейший: меняем background нашего div, при желании можно нарисовать мультик.
Пример
<html>
<head>
<style type="text/css">
#rasschet-inner{ position:absolute;width:200px;height:245px;top:0px;left:0px;
background:url('http://tepsystem.ru/templates/tepsystem-main/images/rasschet.png') center top no-repeat;
transition:all 150ms ease-in-out 20ms;
-webkit-transition:all 150ms ease-in-out 20ms;
-moz-transition:all 150ms ease-in-out 20ms;
-o-transition:all 150ms ease-in-out 20ms;
-ms-transition:all 150ms ease-in-out 20ms; }
#rasschet-inner {
-webkit-animation-direction:normal;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: movement;
-webkit-animation-duration: 3s;
animation-direction:normal;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: movement;
animation-duration: 3s; }
@-webkit-keyframes movement {
from { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
15% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
30% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an2.png') center top no-repeat; }
45% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an3.png') center top no-repeat; }
60% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an4.png') center top no-repeat; }
75% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
to { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
}
@keyframes movement {
from { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
15% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an0.png') center top no-repeat; }
30% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an2.png') center top no-repeat; }
45% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an3.png') center top no-repeat; }
60% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an4.png') center top no-repeat; }
75% { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
to { background:url('http://tepsystem.ru/templates/tepsystem-main/images/an1.png') center top no-repeat; }
}
</style>
</head>
<body>
<div id="rasschet-inner"></div>
</body>
</html>
Результат
]
РАЗВЕРНУТЬ СТАТЬИ ПО ТЕМЕ
Веб-разработкаТри вида редизайна сайта
1376 2
Веб-разработкаС чужим брифом по миру идут
1225 0
Веб-разработкаЦель — респектабельный сайт
477 0
Д
е
й
с
т
в
у
й
!
Оставьте ваши контакты и мы ответим в течение 10 минут.
Ваша заявка принята!
Рассылка Reconcept, подпишитесь на наш полезный блог
Ваша заявка принята!