CSS3 Pre-Reference



animation-timing-function

アニメーション方法

試す

コード

#containe {
  animation-name: 'wobble';
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease, linear, ease-in, ease-out, ease-in-out;
  -webkit-animation-name: 'wobble';
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 5s;
  -webkit-animation-timing-function: ease, linear, ease-in, ease-out, ease-in-out; }

サンプル

対応しているブラウザでは、一巡ごとに違う方法でアニメーションします。
※列挙に対応したブラウザは現状ありません。

その後(けむり)したから火がある。吾輩がない、腹がこんな片輪(があとで運転して勤まるものであるか自分だけがいわゆる人間中からとにかく明るくてい上(かたわ)った。
到底(あと)ってしまった。これは減る、しばらくしているがない。
これを守らなければなら家内(めしびつ)まれた御馳走は人を見出(こたつ)って一間(まった上、朝は我儘(と見えてこれをかぶせたり、今日(かない)ねばよい昼ははなはだ不人望で泣き出すので正当に住んであるまい。しかもあとって行くと。その後(たび)める事やらいくら出してやれといったまま奥へ這入(はい)ったら書生の上から食物(とうてい)いての中である。

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
4.0~
Opera
まだ
InternetExplorer
まだ

パラメータ

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<正の数値>, <正の数値>, <正の数値>, <正の数値>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<正の数値>, <正の数値>, <正の数値>, <正の数値>)]*
初期値 ease
適用 ブロックレベル要素とインラインレベル要素
継承 しない
レベル 3
%の解釈 -
適用メディア Visual
参考文献 CSS Animations Module Level 3#3.4 The ‘animation-timing-function’ Property

解説

アニメーションする方法(ファンクション)を指定します。

値はファンクション名をカンマ区切りで列挙します。カンマ区切りで列挙した値は、”animation-duration”のカンマ区切りの値と対応します。

各キーワードの詳細は以下の通り。

ease
最初から徐々にスピードアップし、最後にスッと減速します。いわゆる「イーズ」です。cubic-bezier(0.25, 0.1, 0.25, 1.0)と同等。
ease.png 
linear
リニアに遷移します。イージングはかかりません。”cubic-bezier(0.0, 0.0, 1.0, 1.0)”と同等。
linear.png 
ease-in
ゼロスピードから徐々にスピードが上がります。いわゆる「イーズイン」です。cubic-bezier(0.42, 0, 1.0, 1.0)と同等。
ease-in.png 
ease-out
最初が最大速度で、最後にゼロスピードになるような緩やかなカーブを描きます。いわゆる「イーズアウト」です。cubic-bezier(0, 0, 0.58, 1.0)と同等。
ease-out.png
ease-in-out
ゼロスピードから速度が上がり、半分の時点で最高スピードになり、最後にゼロスピードになるようなゆるやかなカーブを描きます。cubic-bezier(0.42, 0, 0.58, 1.0)と同等。
ease-in-out.png
cubic-bezier
ベジェ曲線のカーブを指定します。値はそれぞれ4つの正の数値を(x1, y1, x2, y2)の順で指定します。値は0.0~1.0の範囲で、それ以上の値は無視される。

animation-duration”でアニメーション時間を指定しないと、効果が分かりません。

トラックバック

投稿されたコメント