transitionとちょっと近いですがCSSでのanimationに関して。
HTML
1 2 |
<div class="block animation_css"> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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で可視範囲に入ってからアニメーションさせる方法