CSSアニメーションで
スライドするタイトル

CSS3 animation-nameを使ってスライドインするタイトル(h1要素)のテストです。キーフレームアニメーションを適用する場合、その要素にanimation-nameを設定し、@keyframesルールを定義してキーフレームを適用します。キーフレームアニメーションにはanimation-nameと@keyframesルールの両方が必要で、どちらかが欠けていたり、animation-nameがnone(初期値)になっていると動きません。

スライドインするタイトルの位置ですが、動きを確認しやすくするため左に寄せています。また、ベンダープレフィックスが多くなるので、これを省くための「prefixfree.js」を設置しています。

CSS ソース

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%;
		}
	}
※引用、参考:https://developer.mozilla.org/ja/
docs/Web/Guide/CSS/Using_CSS_animations
戻るボタン