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 奇数界では普通方向の再生、偶数界では逆方向の再生となってアニメーションサイクルを繰り返す

ベンダープレフィックス

hanakodesu

Load More... Follow on Instagram