css animationの使い方、他スクロース量でのアニメーションなど

投稿日：2018年3月14日更新日：2018年4月22日

transitionとちょっと近いですがCSSでのanimationに関して。

HTML

<div class="block animation_css">
</div>

1 2	<div class="block animation_css"> </div>

CSS

.animation_css{
    animation-name: sizeChange;
    animation-duration: 1s;
    animation-timing-function: liner;
    animation-delay: 5s;
    animation-iteration-count: infinite;
   //以下のようにショートハンドで書いてもよし。
   //animation: sizeChange 1s liner 5s infinite
}

@keyframes  sizeChange{
	0% {
		width: 10px;
	}
	100% {
		width: 100px;
	}
}

.animation_css{

animation-name: sizeChange;

animation-duration: 1s;

animation-timing-function: liner;

animation-delay: 5s;

animation-iteration-count: infinite;

//以下のようにショートハンドで書いてもよし。

//animation: sizeChange 1s liner 5s infinite

}

@keyframes sizeChange{

0% {

width: 10px;

}

100% {

width: 100px;

}

幅が10pxから100pxに変化し、これが繰り返されます。

プロパティですが、
animation-name: sizeChange;　変化を具体的に定義(@keyframeで定義)
animation-duration: 1s;　変化にかかる時間
animation-timing-function: liner;　変化の方向
animation-delay: 5s;　画面が表示されてから変化にかかる時間
animation-iteration-count: infinite;　変化の回数。infiniteは無限

@keyframes sizeChange{ 0% { width: 10px; } 100% { width: 100px; }}

0→100の方向に当然変化します。0,100だけでなく、その中間地点の変化を書くこともできます。

githubのソースは下記を参照。

https://github.com/umanari145/css/blob/master/animation.css
https://github.com/umanari145/css/blob/master/animation.html
【CSS3】@keyframes と animation 関連のまとめ

その他、スクロースしたときに変化するアニメーションなど。

jQueryとCSSのtransitionで可視範囲に入ってからアニメーションさせる方法