css3で1枚の画像をスプライトさせるのではなく、5枚の画像をパラパラアニメーション(Gifアニメではありません)
.parapara{overflow:hidden;width:150px;height:113px;} /*width:150px;height:113px;は一枚の画像の大きさ*/ .inside { animation:type1 infinite steps(5) 1s;width:800px;} /*insideの幅指定は必須。画像を横並びにした合計のピクセル数以上で!stepsは画像の枚数。*/ @keyframes type1 { 100% { transform:translate3d(-750px,0,0); } }
css3で1枚の画像をスプライトさせるのではなく、6枚の画像をパラパラアニメーション(Gifアニメではありません)
.parapara2{overflow:hidden;width:240px;height:320px;} .inside2 { animation:type2 infinite steps(6) 1s;width:1500px;} /*insideの幅指定は必須。画像を横並びにした合計のピクセル数以上で。*/ @keyframes type2 { 100% { transform:translate3d(-1440px,0,0); } }
無料でGIFアニメ生成してくれるありがたいサイト(ダウンロードの際はプレビュー画像を直接右クリック!→http://ao-system.net/gifanima/