Анимация изображения в веб-дизайне без на чистом CSS


Наступает время, когда формат изображения GIF уходит в прошлое. В современном браузере несложно сделать анимацию без этого формата, используя JavaScript или же чистый CCS3. Конечно, найдутся противники такой технологии, которые будут говорить, что проще использовать GIF для этих целей, но каждый для себя выберет тот способ, который ему ближе.

Итак, анимация спрайт-изображения на чистом CSS

Код css:

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://artkiev.com/blog/wp-content/uploads/2013/09/sprite.png");

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

Код HTML:

<img src="http://artkiev.com/blog/wp-content/uploads/2013/09/sprite.png" />
<div class="hi"></div>

Работает во всех современных браузерах.

Возврат % от покупок

Другие публикации:

Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Статусы для соц.сетей на ArtKiev Design Studio