簡単に導入できる！CSS Animation delayの使い方

どうも、僕です。

今回はタイトル通り、CSS Animation delayの使い方について説明したいと思います。

CSS Animation delayとは？

CSSアニメーションがいつ始まるかを指定できるものです。

CSSアニメーションを使ったことがある人ならわかると思いますが、CSSアニメーションは指定をしない限りアニメーションが適用されたらすぐにアニメーションを開始します。

ですので、自分でアニメーション開始のタイミングを操作したい時に、この「animation-delay」を使います。
ちなみにこのブログのHeaderロゴはSVGアニメーションをCSSで実装しているのですが、画像を読み込ませてる関係で少し遅らせないといい感じのタイミングにならないのでアニメーションの開始のタイミングをanimation-delayを使って遅らせています。

また、headerロゴ「De.」を各文字で違うタイミングで動かすために、それぞれ別のanimation-delayを使用し、異なる秒数を指定することで左側からだんだんとアニメーションが動くように実装しています。

構文

.ani{
	animation-delay: 3s;
	animation-delay: 3s, 4ms;
}

対応ブラウザ

• IE
• Firefox
• Opera
• Chrome
• Safari

一応主要ブラウザには対応しているのですが、ベンダープレフィックスを指定しないと動かないこともあります。

ベンダープレフィックス

-moz-animation-delay: 3s;
-webkit-animation-delay: 3s;
-o-animation-delay: 3s;

一番最初にこのanimation-delayを使用した時にChromeだったんですが、全然動かなくてイライラしてたんですけど、
ただ単に-webkit-のベンダープレフィックス忘れてただけでした笑

指定可能な値

単位の指定は秒（s）かミリ秒（ms）でできます。単位をしていない場合はanimation-delayが効きませんのでご注意ください。表記の仕方は上の構文のところに書いてあります。

DEMO

下記がanimation delayのデモになります。
hoverしてから2秒（2s）後にバックグラウンドの色を変化させています。

※hoverしたままにしといてください。

.delay-demo{
width:100px;
height:100px;
background:#F50;
}

.delay-demo:hover{
animation: demo 0.5s ease-in alternate forwards;
-webkit-animation:demo 0.5s ease-in 0s forwards;
-o-animation:demo 0.5s ease-in 0s forwards;
animation:demo 0.5s ease-in 0s forwards;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;
animation-delay:2s;
}

@keyframes demo{
0%{}
100%{background:#444;}
}

どうですか？ものすごい簡単ですよね？
ぜひCSSアニメーションのタイミングを操作したいって方は使用してみてはどうでしょうか。