まずはDEMOを見て下さい。
DEMO
htmlとcssの中身は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <div id="top" class="appear"> <header> <h1>CSS animation <span class="appear d1">only once</span> <span class="appear d2">at</span> <span class="appear d3">page beginning.</span></h1> </header> <div class="appear d4"> <p>Animation for attention the content. <span class="appear d6">Elegantly,</span> <span class="appear d8">Modestly,</span> <span class="appear d10">Delay a timing on purpose.</span></p> <pre class="appear d12"><!--省略--></pre> </div> </div> <footer><!--省略--></footer> </body> |
|
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 |
/* css animation (prefixes are cut) */ .appear { transform-origin:center top; animation:show 1s both; } span.appear {display:inline-block;} .d1 {animation-delay:1s;} .d2 {animation-delay:2s;} .d3 {animation-delay:3s;} .d4 {animation-delay:4s;} .d6 {animation-delay:6s;} .d8 {animation-delay:8s;} .d10 {animation-delay:10s;} .d12 {animation-delay:12s;} @keyframes show { 0% { transform:translate(0,2em); opacity:0; text-shadow:0 0 0 #0f0; } 50% { text-shadow:0 0 0.5em #0f0; } 100% { transform:translate(0,0); opacity:1; text-shadow:none; } } |
ページを読み込んだ時に要素をanimationさせる
これは単純に、目的の要素にanimationを指定するだけで良い。
.appear {animation:show 1s both;} の部分がそれ。ショートハンドで書いているのをサブプロパティに書き下すと、以下のようになる。
- animation-name（@keyframesの名前）
- show
- animation-duration（アニメにかける時間）
- 1s
- animation-fill-mode（アニメの実行前後に、keyframesの0%と100%に指定したスタイルを適用するか。）
- both
animation-fill-modeでアニメの開始前と終了後をコントロール
まずは animation-fill-mode がミソ。以下の4つの値を指定できる。defaultはnone。
- none
- keyframes内の指定は、アニメ中にだけ効果が及ぶ。
- forwards
- アニメが終了した後も、100%に指定した状態をキープする。
- backwards
- animation-delayの間（アニメする前）に、0%に指定した状態で待機させる。
- both
- forwardsとbackwardsの両方の効果
詳しくはanimation-fill-mode – CSS | MDNを参照して下さい。
animation-animation-iteration-countは初期値が1
次のミソがanimation-iteration-count。アニメの繰り返し回数の指定で、無限ループなら infinite で指定できる。初期値が1なので、ショートハンドで数字を書かずに省略すると、1回だけのアニメーションになる。
詳しくはanimation-iteration-count – CSS | MDNを参照の事。
animation-delayは、別のクラスを重ねがけすると便利
パラパラと、時間差で要素を表示しているのは、.d1 とか .d12 などのクラスに指定した animation-delay 。汎用的に使い回すなら、こうしてクラス分けした方がスッキリと指定できるかもしれない。