Animation -> anim typo
HTML
<div id="typo">
<div><p>DO YOU</p></div>
<div><p>REALISE</p></div>
<div><p>IT'S JUST</p></div>
<div><p>CSS</p></div>
<div><p>?</p></div>
</div>
<a id="replay" href="#">Replay demo</a>
CSS
html{font-family:sans-serif;background:#eee;font-size:.9em;}
#typo{
position:relative;
width:250px;
margin:100px auto;
font-size:0.9em;
}
#typo div p{
font-weight:bold;
width:250px;
margin-bottom:2px;
background:#91eaF3;
box-shadow:inset 0 5px 5px #fff;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(255,255,255,.5);
/*box-shadow*/
-webkit-box-shadow:0 0 5px rgba(0,0,0,.75);
-moz-box-shadow:0 0 5px rgba(0,0,0,.75);
box-shadow:0 0 5px rgba(0,0,0,.75);
}
#typo div p.anim{
/*animation*/
-webkit-animation:rot .6s ease-in-out 1s backwards;
-moz-animation:rot .6s ease-in-out 1s backwards;
-ms-animation:rot .6s ease-in-out 1s backwards;
-o-animation:rot .6s ease-in-out 1s backwards;
animation:rot .6s ease-in-out 1s backwards;
}
#typo div p.replay{
/*animation-play-state*/
-webkit-animation-play-state:running;
-moz-animation-play-state:running;
-ms-animation-play-state:running;
-o-animation-play-state:running;
animation-play-state:running;
}
#typo div:first-child p{
font-size:40px;
letter-spacing:-2px;
/*animation-delay*/
-webkit-animation-delay:.6s;
-moz-animation-delay:.6s;
-ms-animation-delay:.6s;
-o-animation-delay:.6s;
animation-delay:.6s;
}
#typo div:nth-child(2) p{
font-size:55px;
letter-spacing:-2px;
/*animation-delay*/
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
#typo div:nth-child(3) p{
font-size:35px;
letter-spacing:-2px;
/*animation-delay*/
-webkit-animation-delay:1.4s;
-moz-animation-delay:1.4s;
-ms-animation-delay:1.4s;
-o-animation-delay:1.4s;
animation-delay:1.4s;
}
#typo div:nth-child(4) p{
font-size:90px;
letter-spacing:-2px;
/*animation-delay*/
-webkit-animation-delay:1.8s;
-moz-animation-delay:1.8s;
-ms-animation-delay:1.8s;
-o-animation-delay:1.8s;
animation-delay:1.8s;
}
#typo div:nth-child(5)...
JavaScript
$(function(){
$('#typo div p').addClass('anim');
$('#replay').bind("click", {obj: "#typo div p"},function(e){
$(e.data.obj).toggleClass('anim');
return false;
});
//mais du coup, plus animation-play-state
});