Clever Geek Handbook

CSS 3スプライトアニメーション

スプライトアニメーションは、原始的であるにもかかわらず、四半世紀以上にわたってコンピュータグラフィックスやゲームで成功し、使用されてきたものの1つです。 3次元のゲームでも、スプライトがあります。たとえば、爆発の看板です。 多くのブラウザやフラッシュゲームでは、スプライトアニメーションを使用しています。これは非常にシンプルで高性能を必要としないためです-フレームを切り替えるだけです。 また、CSS 3でのアニメーションの出現により、JavaScriptなしでページでスプライトを使用できるようになりました。



今すぐ以下の方法がWebkitブラウザーでのみ機能することを予約します。

それでは、3つのフレームの単純なスプライトを見てみましょう。



必要なのは、divに背景を配置し、時間とともに背景の位置を変更することだけです。 すべてがシンプルなようです：

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 ; } }





しかし、悲しいかな！ その結果、 ポルノは1つしかありません。 ぎくしゃくしたフレームの長さではなく、画像がスムーズに移動します。 長い間隔を空けてフレームをすばやく切り替えることで、状況を改善してみましょう。

Copy Source | Copy HTML



  2. @ -webkit-keyframesスプライト
  3. {
  4. 0％
  5. {
  6. バックグラウンド位置 ： -0px 0 ;
  7. }
  8. 33.332％
  9. {
  10. バックグラウンド位置 ： -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. バックグラウンド位置 ： -64px 0 ;
  23. }
  24. 99.999％
  25. {
  26. バックグラウンド位置 ： -64px 0 ;
  27. }
  28. 100％
  29. {
  30. バックグラウンド位置 ： -0px 0 ;
  31. }
  32. }


コードは非常に膨大であることが判明しましたが、1つの「しかし」ではないにしても、 結果はほとんど私たちに合っています：ジャークは短い間隔で観察できます。

完全に正しいアニメーションを作成するには、別のCSS 3機能であるサイズの増加に頼る必要があります。 これを行うには、フレームの幅と高さを1ピクセルに設定し、transformプロパティを使用してスプライトを32ピクセルに増やします。 変換は要素自体のサイズだけでなく背景にも影響するため、サイズを幅3ピクセル、高さ1に設定し、アニメーション自体でも1ピクセルずつシフトします。 増加とともに、正確に32ピクセルになります。

Copy Source | Copy HTML



  2. .sprite
  3. {
  4. 位置 ： 絶対 ;
  6. 左 ： 50％ ;
  7. トップ ： 33％ ;
  8. 幅 ： 1px ; / *要素サイズを1ピクセルに設定* /
  9. 高さ ： 1px ;
  11. マージン ： -16px 0 0 -16px ; / *変換によるインデントの増加は影響を受けません* /
  13. 背景 ： url （ sprite.png ） no-repeat 0 0 ;
  14. 背景 サイズ ： 3px 1px ; / *背景サイズも縮小されます* /
  16. -webkit-animation-name： スプライト ;
  17. -webkit-animation-duration：.3s;
  18. -webkit-animation-iteration-count： 無限 ;
  19. -webkit-animation-timing-function： リニア ;
  20. -webkit-transform：scaleX（ 32 ）scaleY（ 32 ）; / *要素のサイズを大きくします* /
  21. -webkit-transform-origin： 左上 ;
  22. }
  24. @ -webkit-keyframesスプライト
  25. {
  26. / *背景を1ピクセルずつシフト* /
  27. 0.000％
  28. {
  29. バックグラウンド位置 ： -0px 0 ;
  30. }
  31. 25.000％
  32. {
  33. バックグラウンド位置 ： -1px 0 ;
  34. }
  35. 50.000％
  36. {
  37. バックグラウンド位置 ： -2px 0 ;
  38. }
  39. / *正直、私はなぜシフトする必要があるのか​​理解できませんでした* /
  40. / *もう1ピクセル（* /
  41. / *空のフレーム）。 それ以外の場合はすべて表示されません* /
  42. / *アニメーションフレーム。 * /
  43. 75.000％
  44. {
  45. バックグラウンド位置 ： -3px 0 ;
  46. }
  47. 100,000％
  48. {
  49. バックグラウンド位置 ： -0px 0 ;
  50. }
  51. }


現在、 結果は私たちの期待に完全に一致しています。 アニメーションは正常で、けいれんなどはありません。

キーフレームを生成するには、次の関数を使用できます。

Copy Source | Copy HTML



  1. 関数 generateKeyframes（ $ count 、 $ sprite_width ）
  2. {
  3. $ result = '' ;
  4. $カウント ++;
  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. }


残念ながら、この方法はChromeやSafariなどのWebkitブラウザーでのみ機能するため、まだほとんど実用的ではありません。 Firefoxではアニメーションはスムーズなままで、Operaでは最初のフレームのみが表示され、IEではまったく機能しません。 そのため、JavascriptとFlashを使用したアニメーションは、しばらくの間その位置を保持します。


More articles:


All Articles