CSS3　点滅 animation

CSS3　点滅 animation

2015-10-19
古いっす！この記事は1年以上前に投稿されたもので、情報が古いかもしれません。ご注意ください！

animation

animationプロパティでは、 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、組み合わせて指定することができる。 省略された値はそれらの初期の値に設定される。

animation-name

アニメーション名

値

カンマ（ , ）区切りでアニメーション名のリストを指定する

初期値

none　アニメーション効果を指定しない

animation-duration

アニメーション一回分の時間の長さ

値

1秒なら1s

初期値

0

animation-timing-function

アニメーションのタイミング・進行割合

値

ease（初期値） 開始と完了を滑らかにする
liner 一定
ease-in ゆっくり始まる
ease-out ゆっくり終わる
ease-in-out ゆっくり始まってゆっくり終わる
cubic-bezier（数値,数値,数値,数値） 3次ベジェ曲線のP1とP2を(x1,y1,x2,y2)で指定

animation-delay

アニメーションがいつ始まるか

値

数値 時間を指定する。1秒なら1s
初期値 0

animetion-iteration-count

アニメーションの繰り返し回数

値

infinite 無限に再生を繰り返す
数値 再生回数
初期値 1

animation-direction

アニメーションを交互に反転再生させるかどうか

値

normal 普通方向の再生でアニメーションサイクルを繰り返す（初期値）
alternate 奇数界では普通方向の再生、偶数界では逆方向の再生となってアニメーションサイクルを繰り返す

ベンダープレフィックス