Анимация HTML+CSS


Теги: css, html, анимация

анимация 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>

Результат

 


Комментарии ()