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');
}