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

Настає час, коли формат зображення GIF відходить у минуле.

У сучасному браузері нескладно зробити анімацію без цього формату, використовуючи JavaScript або ж чистий CCS3. Звичайно, знайдуться противники такої технології, які будуть говорити, що простіше використовувати GIF для цих цілей, але кожен для себе вибере той спосіб, який йому ближче.

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

Код css:

.hi {
                  width: 50px;
                  height: 72px;
                  background-image: url("http://site/img/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://site/img/sprite.png" />
              <div class="hi"></div>

Працює у всіх сучасних браузерах.