#019 posted on 2017.06.06

cssのanimationのメモ

cssのanimationの各設定値忘れるのでメモ。

 

まとめて書く時、

要素 {

animation:

animation-name値 animation-duration値 animation-timing-function値 animation-delay値 animation-iteration-count値 animation-direction値 animation-fill-mode値,

animation-name値 animation-duration値 animation-timing-function値 animation-delay値 animation-iteration-count値 animation-direction値 animation-fill-mode値;

}

 

・animation-name

キーフレームアニメーション名

初期値 : none

 

・animation-duration

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

初期値 : 0

 

・animation-timing-function

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

初期値 : ease 「cubic-bezier(0.25, 0.1, 0.25, 1.0)」と同じ

linear 「cubic-bezier(0.0, 0.0, 1.0, 1.0)」と同じ

ease-in 「cubic-bezier(0.42, 0, 1.0, 1.0)」と同じ

ease-out 「cubic-bezier(0, 0, 0.58, 1.0)」と同じ

ease-in-out 「cubic-bezier(0.42, 0, 0.58, 1.0)」と同じ

cubic-bezier(数値, 数値, 数値, 数値) 3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定

http://cubic-bezier.com

 

・animation-delay

アニメーションの開始を遅らせる時間を指定

初期値 : 0

 

・animation-iteration-count

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

初期値 : 1

infinite 無限に再生を繰り返す

 

・animation-direction

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

初期値 : normal 普通方向の再生でアニメーションサイクルを繰り返す

alternate 奇数回では普通方向の再生(0% → 100%)、偶数回では逆方向の再生(100% → 0%)

 

・animation-fill-mode

アニメーションを実行する前後に、スタイルを適用するか指定

初期値 : none
forwards アニメーション終了後にキーフレームアニメーションで指定したプロパティ(アニメーション終了時=100%)を適用
backwards アニメーション終了前にキーフレームアニメーションで指定したプロパティ(アニメーション開始時=0%)を適用
both forwardsとbackwardsを適用

 

 

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations

SHARE THIS ON...

- 人気記事 -