2013-09-13 clubringo勉強会議事録

css3でパラパラアニメ

css3で1枚の画像をスプライトさせるのではなく、5枚の画像をパラパラアニメーション(Gifアニメではありません)

でんでん1でんでん1でんでん1でんでん1でんでん1

htmlのポイント

.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でパラパラアニメ

css3で1枚の画像をスプライトさせるのではなく、6枚の画像をパラパラアニメーション(Gifアニメではありません)

でんでん1でんでん1でんでん1でんでん1でんでん1でんでん1
.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アニメでです。

無料でGIFアニメ生成してくれるありがたいサイト(ダウンロードの際はプレビュー画像を直接右クリック!→http://ao-system.net/gifanima/

でんでん1