ページを読み込んだ時に一度だけ動かすCSSのanimation

まずはDEMOを見て下さい。
DEMO
htmlとcssの中身は以下の通り。

ページを読み込んだ時に要素を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 。汎用的に使い回すなら、こうしてクラス分けした方がスッキリと指定できるかもしれない。

コメントを残す

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

CAPTCHA