Geekly Articles each Day
📜 ⬆️ ⬇️

CSS3 sprite animation

Sprite animation is one of those things that, for all its primitiveness, have been successfully working and applied in computer graphics and games for more than a quarter of a century. Even in 3D games there are sprites - for example, billboards of explosions. In many browser and flash games, sprite animation is used, as it is very simple and does not require high performance - just switch frames and that's it! And with the advent of animation in CSS 3, it became possible to use sprites on your pages without javascripts.

Just want to make a reservation that the method described below works so far only for webkit-browsers.
So, take a simple three-frame sprite:

All we have to do with it is to set the background in a div and change the background-position with it over time. It seems to be simple:
Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  1. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  2. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  3. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  5. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  6. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  7. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  8. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  10. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  12. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  14. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  15. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  16. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  17. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  18. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  20. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  21. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  22. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  23. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  24. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  25. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  26. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  27. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  28. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  29. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  30. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  31. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  32. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  33. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  34. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  35. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  36. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  37. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  38. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  39. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }
  40. Copy Source | Copy HTML .sprite { position : absolute ; left : 50% ; /* */ top : 33% ; width : 32px ; /* */ height : 32px ; margin : -16px 0 0 -16px ; /* :-) */ background : url ( sprite.png ) no-repeat 0 0 ; /* */ -webkit-animation-name: sprite ; /* */ -webkit-animation-duration: .3s; /* 300 */ -webkit-animation-iteration-count: infinite ; /* */ -webkit-animation-timing-function: linear ; /* */ } /* sprite */ @-webkit-keyframes sprite { /* , 0 */ 0% { background-position : -0px 0 ; } 33% { background-position : -32px 0 ; } 66% { background-position : -64px 0 ; } 100% { background-position : -0px 0 ; } }

But alas! As a result, we see only one pornography . The picture moves smoothly, and not jerky in length in the frame. Let's try to improve the situation by taking long intervals and quickly switching frames:
Copy Source | Copy HTML
  2. @ -webkit-keyframes sprite
  3. {
  4. 0%
  5. {
  6. background-position : -0px 0 ;
  7. }
  8. 33.332%
  9. {
  10. background-position : -0px 0 ;
  11. }
  12. 33.334%
  13. {
  14. background-position : -32px 0 ;
  15. }
  16. 66.665%
  17. {
  18. background-position : -32px 0 ;
  19. }
  20. 66.667%
  21. {
  22. background-position : -64px 0 ;
  23. }
  24. 99.999%
  25. {
  26. background-position : -64px 0 ;
  27. }
  28. 100%
  29. {
  30. background-position : -0px 0 ;
  31. }
  32. }

The code turned out to be quite voluminous, but we are almost satisfied with the result , if it were not for one “but”: with small intervals one can observe jerks.
For fully correct animation, you need to resort to another tricky CSS 3 feature: increase in size. To do this, set the width and height of the frame to 1 pixel and with the help of the transform property we will increase the sprite to our 32 pixels. Since the transform affects not only the size of the element itself, but also its background, we set its size to 3 pixels in width and 1 in height, and in the animation itself we will also shift by 1 pixel. Along with the increase, it will be equal to 32 pixels.
Copy Source | Copy HTML
  2. .sprite
  3. {
  4. position : absolute ;
  6. left : 50% ;
  7. top : 33% ;
  8. width : 1px ; / * element size is set to 1 pixel * /
  9. height : 1px ;
  11. margin : -16px 0 0 -16px ; / * increase in transform does not affect indents * /
  13. background : url ( sprite.png ) no repeat 0 0 ;
  14. background - size : 3px 1px ; / * background size is also decreasing * /
  16. -webkit-animation-name: sprite ;
  17. -webkit-animation-duration: .3s;
  18. -webkit-animation-iteration-count: infinite ;
  19. -webkit-animation-timing-function: linear ;
  20. -webkit-transform: scaleX ( 32 ) scaleY ( 32 ); / * increase the size of the element * /
  21. -webkit-transform-origin: top left ;
  22. }
  24. @ -webkit-keyframes sprite
  25. {
  26. / * shift the background by 1 pixel * /
  27. 0.000%
  28. {
  29. background-position : -0px 0 ;
  30. }
  31. 25.000%
  32. {
  33. background-position : -1px 0 ;
  34. }
  35. 50.000%
  36. {
  37. background-position : -2px 0 ;
  38. }
  39. / * honestly speaking, he did not understand why he should move * /
  40. / * one more pixel (this should be * /
  41. / * empty frame). but otherwise it will not show all * /
  42. / * animation frames. * /
  43. 75.000%
  44. {
  45. background-position : -3px 0 ;
  46. }
  47. 100,000%
  48. {
  49. background-position : -0px 0 ;
  50. }
  51. }

Now the result is fully consistent with our expectations. Animation is normal, without jerks and other things.
To generate key frames, you can use this function:
Copy Source | Copy HTML
  1. function generateKeyframes ( $ count , $ sprite_width )
  2. {
  3. $ result = '' ;
  4. $ count ++;
  5. for ( $ i = 0 ; $ i <= $ count ; $ i ++)
  6. {
  7. $ result . = sprintf ( "\ t% .3f %% \ n \ t {\ n \ t \ tbackground-position: -% dpx 0; \ n \ t} \ n" , $ i * 100. 0 / $ count , ( $ i % $ count ) ( $ sprite_width );
  8. }
  9. return $ result ;
  10. }

Alas, this method is so far hardly applicable in practice, as it works only in Webkit browsers such as Chrome or Safari. In Firefox, the animation will remain smooth, in Opera only the first frame is shown, but in IE it doesn't work at all. So the animation using Javascript and Flash will hold its position for quite some time.

')

Source: https://habr.com/ru/post/119721/

More articles:


All Articles