CSSのanimationを使ってパラパラ漫画のような動きを実装する

2016.02.20

animationのイージングの中にあるsteps()を使って、パラパラ漫画のようなアニメーションを実装してみます。

サンプルコード

HTML

1
2
3
<div class="ball">
    <img src="ball.gif" width="100" height="4000" alt="" />
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.ball {
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}
.ball img {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: ball 2s steps(20) infinite;
    animation: ball 2s steps(20) infinite;
}
 
@-webkit-keyframes ball {
    from {
        top: 0px;
    }
    to {
        top: -4000px;
    }
}
 
@keyframes ball {
    from {
        top: 0px;
    }
    to {
        top: -4000px;
    }
}

steps(X)を指定すると、アニメーション処理をX分割して順々に表示されるようになります。
パラパラ漫画のようなアニメーションのデモページ
　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930