CSS3 animation-nameを使ってスライドインするタイトル（h1要素）のテストです。キーフレームアニメーションを適用する場合、その要素にanimation-nameを設定し、@keyframesルールを定義してキーフレームを適用します。キーフレームアニメーションにはanimation-nameと@keyframesルールの両方が必要で、どちらかが欠けていたり、animation-nameがnone（初期値）になっていると動きません。
スライドインするタイトルの位置ですが、動きを確認しやすくするため左に寄せています。また、ベンダープレフィックスが多くなるので、これを省くための「prefixfree.js」を設置しています。
h1 {
animation-duration: 3s;
animation-name: slide-hidari; //animation-nameを「slide-hidari」に設定
}
@keyframes slide-hidari { //slide-hidari」の@keyframesを定義
from{
color:#fff;
margin-left:150%;
width:300%;
}
to {
color:green;
margin-left:10%;
width:100%;
}
}
