bata's log

フロントエンド系のTipsとかメモ

CSS3でパラパラアニメ

  • スプライト画像を利用したCSS3を使ったパラパラアニメの作り方。

HTML

<div class="anime"><img src="[画像のURL]" alt=""></div>

SCSS

.anime{
    width: 160px;
    height: 300px;
    overflow: hidden;
    margin: 100px;
    img{
        margin-top: 0;
        -webkit-animation-name: anime;
        -webkit-animation-duration: 1.0s;
        -webkit-animation-timing-function: steps(4,end);
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: anime;
        -moz-animation-duration: 1.0s;
        -moz-animation-timing-function: steps(4,end);
        -moz-animation-iteration-count: infinite;
        -ms-animation-name: anime;
        -ms-animation-duration: 1.0s;
        -ms-animation-timing-function: steps(4,end);
        -ms-animation-iteration-count: infinite;
    }
}

@-webkit-keyframes anime{
    100% {margin-top: -1200px;}
}

@-moz-keyframes anime{
    100% {margin-top: -1200px;}
}

@-ms-keyframes anime{
    100% {margin-top: -1200px;}
}

画像

f:id:kawabataryo:20140818135319p:plain

画像:ドロイドちゃん
ドロイドちゃんgifアニメ003 -歩く横向き- | ドロイドちゃんまとめサイト アンドロイド擬人化無料フリー素材

animation-timing-functionstepsを指定すると、なめらかなアニメーションではなく、終着点の値まで飛ぶ事が可能です。
この画像の場合は4コマで作っているので、steps(4,end)と指定することで終着点までを4分割した値までアニメーションせずに変化します。

.anime img{
    margin-top: 0;
   -webkit-animation-timing-function: steps(4/* コマ数 */,end);
}

@keyframes anime{
    100% {margin-top: -1200px/* 終着点までの距離(画像の高さ) */;}
}  

実際に動かすとこんな感じ