指定のアニメ例34コマ漫画サンプル。上二つは「step-start」と「steps(4,start)」の異なる設定で同じ秒数、コマを表示。アニメーション全体ではなくキーフレーム間に適用されるアニメの仕方となっています。重要ポイントだと思われる「キーフレーム間」の意味がわかりやすくなるように、同じアニメだけどキーフレーム数が違うサンプルを並べて比較できるようにしてみました。例2の内容【timing-function記事のお約束の、見比べる実験】timing-function記事ではお約束の比較サンプルです。他ではみかけないので、キーフレームが異なる場合を実験してみました。値で、異なる動作になるのが直感できるかと思われます。width:240px(100%)に変化を反転繰り返し。width:240px(100%)に変化を反転繰り返し。※ウインドウサイズが小さい時は240pxを180px、120pxを90pxにしています。例2は間に50%の値があるので、2段階にtiming-functionしてます。[終了]が次の[開始]になり、アニメしない印象になってますが、例2の方では50%があるのでちゃんと変化しているのが確認できます。縦や横に長い画像を作り、マウスホバーで画像の表示位置を変更する手法は、主にボタン画像やメニューの背景画像などによくつかわれるテクニックになっていますが、アニメの「timing-function」に「step」という仕様があるのはまさにこのテクニックでアニメをコマ送り表示するために用意されたものかもしれない、などと思ったりします。アニメ(キーフレーム)の作り方により、「step-start」や「steps(数値,start)」を指定することでサンプルのようにコマ漫画的に表示するアニメが作れたりします。企業サイトなら、広告バナーアニメに演出として使う、などが考えられるかと思います。同じ表示秒数で、計算させて楽に作りたい時は、「steps(数値,start)」(※表示される画像サイズを同じにしてつなげる調整が必要)、各コマの表示秒数を変えて演出したい時は「step-start」を使う、などが考えられるかと思います。※ガンプラ等でCG作って掲載してた趣味のブログ用に作ったものを加工しています。※作ったのはかなり昔ですが、富野監督の作劇の本を参考に、MSの位置が入れ替わるようなカメラワークを演出してみたり...。アニメ設定、キーフレーム設定を表示1つ目、2つ目は同じアニメに見えますが、アニメの指定方法が異なっています。設定し、8sを5分割したstart位置で自動的にtopの位置が計算されて表示しているアニメになっています。※自動的に高さを分割するタイプなので、画像のコマの高さを同じサイズにする必要があります。意味はないですが「雨の水滴」っぽい演出です。次のページの遅延の項目で一旦作りかけたカウントダウンですが、コマ漫画アニメの方が簡単で、最後だけ少し長めに表示したりの調節がいろいろできるので、コマ漫画アニメの方法でカウントダウンイメージを作ってみました。メインの実験ネタとなります。キーフレーム名と呼びますが、このwebではわざとアニメ名などと書いたりしてます。(わかりづらいので)animation-timing-functionの説明でキーフレームに対して適用されます、の「キーフレーム」は0%{...}や10%{...}などの部分を意図しているかと思いますが、全体もキーフレームなどと呼ぶのでわかりづらいのではないかと思ったりします。2回、変化のタイミングが表現されるということになります。CLICK適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。CLICK1回のアニメーション時間を指定。初期値の0sはアニメーションを実行しない設定。CLICKキーフレームの始まりから終わりまでの間のアニメの仕方を指定キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。)3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。D(xd,yd)=D(1.0,1.0)は省略で、BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。変化量は文字でも可能。CLICKアニメ開始の待ち時間を指定。初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。CLICKアニメーションを繰り返す回数。(無期限に繰り返す)。アニメ周期の一部を実行する場合、整数以外の値(例:0.5なら半分だけ実行)を指定も可能。CLICKアニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。