タイミングを指定してCSSアニメーションを実行する方法

CSSのアニメーションを開始するタイミング(秒数)を、jQueryで指定する方法です。

サンプル

使い方

アニメーション用のCSSを読み込む

アニメーションにはAnimate.cssのアニメーションを使用しています。
html内で当該ファイルを読み込んでください。
もちろん、自分で用意したCSSアニメーションでもOKです!

<link rel="stylesheet" href="animate.min.css">

8行目でページが表示された時にアニメーションする要素を一旦非表示に、アニメーションが始まるタイミングで表示しています。
その他の記述は画像のレイアウトです。

.content {
  width:222px;
  height:213px;
  margin: 50px auto;
  position:relative;
}
.star1,.star2,.star3 {
  opacity:0;
  position:absolute;
}
.star1{
  left:55px;
  top:57px;
}
.star2 {
  left:30px;
  top:32px;
}
.star3 {
  left:0;
  top:0;
}
.animated {
  opacity: 1;
}

jQuery

1秒毎にクラス名を追加する関数ani1(),ani2(),ani3()を実行します。
関数はアニメーション用のCSSのクラスを追加するように指定されています。

$(function() {
  setTimeout('ani1()', 1000); //1秒後に実行
  setTimeout('ani2()', 2000); //2秒後に実行
  setTimeout('ani3()', 3000); //3秒後に実行
});
 
function ani1() {
  $('.star1').addClass('animated bounceIn'); //アニメーション用のクラスを追加
}
 
function ani2() {
  $('.star2').addClass('animated flipInY');
}
 
function ani3() {
  $('.star3').addClass('animated flipInX');
}