Animate.cssでアニメーション表示を遅延（delay）させる方法
Animate.cssを使っていてアニメーションが表示されるタイミングをずらしたい。
このような悩みを解決します。
本記事ではCSSを使って、Animate.cssのアニメーションを遅延させる方法について解説します。
実装サンプル
See the Pen
Animate.css by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
テキストに書いてある指定秒数でフェードイン表示が遅延されてるのがわかります。
実装方法は以下の通りです。
animation-delayプロパティを付与
.delay {
animation-delay: 0.4s;
}
アニメーションを遅延させるにはanimation-delayプロパティを使います。
Animate.cssのクラスが付与されてる遅延させたいhtml要素に以下プロパティを付与。
animation-delay: 遅延させたい秒数s;
以上で遅延が実行されます。
まとめ
アニメーションの間隔を変更したい場合はanimation-durationプロパティを付与します。
animation-duration: アニメーション間隔を開けたい秒数;
以上で解説を終わります。
目次
