CSS 3アニメーションアニメーションアニメーションアニメーション(二)


これは比較的簡単な例です.
まず簡単な例を見ます. CSS3 前回は@keyframesの中でfromとtoだけを使いました.今回はパーセンテージを使っています.これは一番よく使われています.進行を簡単にコントロールできます.
実はそれらには簡単な書き込み属性があります.
アニメーションは全部で8つの属性がありますが、そのうち7つはアニメーションと簡単に書くことができます.
もう一つの簡単には書けない属性は、animation-play-state属性です.
上記の例は以下のように簡単に書くことができます.
6行のコードは一行でできます. CSS3 もちろん彼らにはデフォルトがあります.
上のアニメーションで使用される属性のデフォルト値は、それぞれ以下の通りです.
アニメーション:0                  アニメーションが始まってから終わります.デフォルトはすぐ終わります.
animation-timing-function:ease   スタートが遅いです.そしてスピードを上げます.終わる前に遅くなります.
animation-delay:0                       すぐに運動します        
animation-count:1         アニメは一回だけ運動します.
animation-direction:normal         アニメーションの正常な運動です.