animation-delay

[animation-delay]でアニメ開始の遅延時間を変更する仕様を使ったアイデアなどを実験してみました。

サンプルの内容【例1 タイトルからの説明文表示演出】

タイトルがスライドして説明が表示されるページ表示時のアニメ演出の例。
※スライドアニメは1回で終了する設定にしたので、animation-fill-modeで特に終了状態を(開始も含めてbothに)指定する必要があります。

失敗例の方は 1回で終了するので、 animation-fill-mode: both; 等を指定しないとこうなるという例になってます。
アニメ終了時(100%)ではbeforeは上にスライド済になり、afterのカウント文字も見えなくなってるはずですが、animation-fill-mode: both (又はforwards) の指定がないので、アニメしてない状態 ＝ cssのアニメ以外の設定状態 → beforeがスライドする前で、afterの文言 ４ が上に乗っている状態、になってます。
※成功例と失敗例の「カウント」の仕様については後述してます。

例1のアニメ設定、キーフレーム設定を表示

例1へ

遅延を使ったカウントダウンについて

ここではカウントダウンアニメのオリジナル案（文字の折り返しで作ったもの）を使っています。
前回（前ページ）ではコマ漫画的に画像を使いましたので、人と違うことをやるっぽい 原森IT研 としては、今回はcssのみでカウントダウンするけど、画像ではなく文字列で、さらに不要なdivやspan等を増殖させない、というネタになっています。

このサンプルでは、タグは div 1個のみになっていて、そこには アニメ開始の遅延時間指定 という文字を表示しています。
最初に上に乗っかってる赤いBOXは div:before で作ってます。これが5sの遅延の後に、1sで上にずれる感じになってます。

カウントダウンの数値の方は div:after で作ってます。縦に動くアニメ (topの変化) で表示させたものです。
上下の違いについては、動作テスト用のbothがあるかないかと言う点と、後は上は数値文字「４ ３ ２ １ ０」(全角数字とスペース)、でテストしています。

簡単にアイデアを紹介しておきますと、数字文字列が画像の時と同様に縦に長いBOXになっていて、そこに文字を普通に配置すると、文字が全部表示されてしまうので、文字間にスペースを入れ、ボックスの横幅を短めにして自動的に折り返しをさせて縦長の状態にして配置しています。それを上に移動させている、というものです。
要するに、前ページのカウントダウン画像をテキスト配置で用意しただけ、というものです。

赤色BOXに表示している文字列「animation-delay」カウントダウンしている数値文字「４ ３ ２ １ ０」は以下のようにdivにdatasetで指定しています。

<div id="ani_test_01" data-c="animation-delay" data-t="４ ３ ２ １ ０">アニメ開始の遅延時間指定</div>

「カウントダウンアニメ」などを検索すると javascript や jQuery で、などの他に、CSSだけで、という記事も発見できるかと思います。
ただ、CSSのみで作る場合、div や span や li などが大増殖するような、正しいHTML文法からみるとカッコ悪い感じの仕様になってしまう場合が多いかと思いますので、HTML構文にこだわりのある人は演出などで使う文字等はdataset仕様を使う方法をアイデアの一つとして持っておくとシンプルなソースで実現できる方法を思いつく可能性もあるので、ご参考までに、WEB tips に詳細記事 dataset(カスタムdata属性)をCSSで活用するアイデア3 [カウントダウンテキスト]を掲載しています。

サンプルの内容【例2 遅延を使って同じアニメで広告アニメ】

同じアニメを遅延を使って、キャッチ文の段落divを順に動かしている広告アニメのようなサンプルです。
サンプルなので、文字が読めなくても気にせず、雰囲気重視で動かしてます。
途中、インパクトを出すために1つだけ別のアニメを挟んでいるけれど、アニメの長さが同じなので、遅延させて順に表示させてもずれることはない形で作れます。

※遅延させて順にアニメを表示する、という作り方の場合、全体のアニメ時間を決め、その中で、遅延させるパーツの数に合わせて、キーフレームの数値を調節する必要があります。（そうしないと重なってしまう）

例2のアニメ設定、キーフレーム設定を表示

例2へ

ちなみに、このページのアニメ設定やキーフレームは、原森webの下記のツールで作成してます。
【Animation ソース作成ツール】【keyframes ソース作成ツール】

animationのプロパティ

animation-name CLICK

適用するキーフレーム(アニメ名)を指定。カンマ区切りで複数指定ができる。

animation-duration CLICK

1回のアニメーション時間を指定。1s 等と指定。初期値の0sはアニメーションを実行しない設定。

animation-timing-function CLICK

キーフレームの始まりから終わりまでの間のアニメの仕方を指定

キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用されます。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用されます。(引用：[MDN] animation-timing-function )

3次ベジェ曲線で変化を設定。開始点Aと終了点Dは決まってるので、Aからの接線ポイントBやDからの接線ポイントCを指定。
A,B,C,D は それぞれA(xa,ya)=A(0,0), D(xd,yd)=D(1.0,1.0)は省略で、
BとCの座標をcubic-bezier(xb,yb,xc,yc)で指定する。
変化量は文字でも可能。
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)

animation-delay CLICK

アニメ開始の待ち時間を指定。1s 等。
初期値=0(すぐに開始)。負の値の場合、過去にさかのぼって開始されていたアニメのと中からはじまる。

animation-iteration-count CLICK

アニメーションを繰り返す回数。1 や 2 などと数値、又は infinite (無期限に繰り返す)。
アニメ周期の一部を実行する場合、整数以外の値(例：0.5なら半分だけ実行)を指定も可能。

animation-direction CLICK

アニメの繰り返し時に、逆方向か最初の状態から再び開始するか、の繰り返しの方法を指定。

normal…順方向のアニメーションのみ(デフォルト)

alternate…初回 順方向、次に逆方向、以降、順、逆…と実行。(順 逆 順 逆 …)

reverse…逆方向のアニメーションのみ

normal…順方向のアニメーションのみ(デフォルト)

alternate-reverse…初回 逆方向、次に順方向、以降、逆、順…と実行。(逆 順 逆 順 …)

animation-fill-mode CLICK

アニメの実行前や実行後に適用するスタイルを指定。

normal…アニメで指定されたスタイルは、アニメの実行前や実行後には適用されない。

forwards…アニメの最後に適用された状態を維持する。通常は100%やtoのスタイルになる。※animation-directionが alternate、animation-iteration-count が偶数の場合は0%やfromのスタイルとなる。

backwards…0%やfrom キーフレームで定義された値を即座に適用し、animation-delay プロパティで指定した時間の間、その状態を維持する。

both…forwards と backwards の両方の規定に従う。なのでアニメの設定が実行前と実行後の両方に適用される。

animation-play-state CLICK

アニメを一時停止、再開などを指定する設定。この仕様については、マウスホバーでrunningとpausedを切り替えるなどを想定してるのではないかと思う。

ページトップへ