11 августа 2015 Статья №14

Анимация HTML+CSS

Мы регулярно выпускаем такие полезные статьи. Подпишитесь на наш Телеграм-канал, там есть идеи, которые мы больше нигде не публикуем.

Задача

Анимировать картинку. На картинке электростанция и нам хочется, чтобы у нас на сайте была анимация, показывающая анатомию конструкции.

Решение

Готовим необходимое количество картинок. С помощью правила @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>