原森情報技術研究所 WEBコンテンツ企画・制作・運営・サポート / 兵庫県 神戸市 明石市 /

animation-duration

animation-duration

animation-durationサンプル

例1

A
B
0%
100%

animation-durationは1回のアニメの時間(0%→100%)

説明

例2

A
B
C
D

秒数が異なる同じアニメ例。

説明

例3

now loading ...

CSSでローディングサンプル。

説明

animation-duration

[animation-duration]は1回のアニメの動作時間を指定します。
注意点は、animation-duration がキーフレームの 0% から 100% までの秒数を指定する点で、 反転アニメの場合、(作り手視点の想定では)2倍の時間でワンセットのアニメとなります。
つまり、animation の秒数を 1s で指定した場合、 反転を含めて作ったものは 2s のアニメということです。

例1の内容【同じアニメを同じ秒数で並べたもの】

反転アニメだからといって、秒数が半分になるということはない、という確認です。
0% : キーフレーム0%のスタイル(top:0px)
100% : キーフレーム100%のスタイル(top:50px)
A : キーフレームの0%から100%の変化を 2s で1回、以降、繰り返し。
B : キーフレームの0%から100%の変化を 2s で1回、100%から0%の変化を 2s で1回 (反転アニメ) 、以降、繰り返し。
Bが往復するのに 4s 必要で、その間にAが2回動きます。

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

例1へ

例2の内容【秒数違いサンプル】

あまり意味はないけれど、同じ反転繰り返しアニメを1sずつ違う秒数にしたものです。キーフレームは例1と同じです。
※ 0% top : 0px 、100% top : 50px と指定しただけのアニメです。
A:1s B:2s C:3s D:4s で動作します。

アニメ設定を表示

例2へ

例3の内容【秒数をバーで表現】

ローディングイメージっぽく、1sで伸びる青色バーと、10sを steps(10,start) でカウントする赤色バーを box の before after で配置したサンプルです。上のバーは最初に1s遅延させて調節しています。

2つのアニメは [0% width : 0px → 100% width : 180px] という動作をする同じアニメを反転せず繰り返しているだけですが、
animation-duration の秒数と animation-timing-function の変化の仕方が違うものとなっています。

gifアニメなどを複数並べて動きを同期させようとすると、画像の読み完了等をjavascript等でチェックして同期させておかないとずれたりする可能性があったりしますが、cssアニメの場合、(HTMLやcssをすべて読み込んでからアニメ処理しているはずなので)計算された秒数が上手く合っていれば、ずれることはないと思います。なのでサンプルのような秒数カウンターのようなものも作りやすいかと思います。

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

例3へ

ネタコラム

アニメ設定で最初に思ったのは、キーフレームを%で指定する仕様が微妙に不便かもしれない、という点です。
アニメ設定では animation-duration で秒数指定するのだから、キーフレームも秒数指定できればいいのに、などと思ったり…。

繰り返しアニメの場合、0%や100%の点は一瞬なので、例えば、例3のようにバーが伸びるアニメで、最大に伸びきった時は一瞬表示されるだけになり、繰り返しの場合は次のアニメにすぐ移行して、また伸び始めアニメになります。なので例3のように、伸びきった状態をしばらく残したい時は、steps(数値,start)、steps(数値,end)、又はアニメの作り方により step-start、step-end などを使うことで調節する必要があるかと思います。

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

animationのプロパティ

animation-name CLICK
animation-duration CLICK
1回のアニメーション時間を指定。1s 等と指定。初期値の0sはアニメーションを実行しない設定。
animation-timing-function CLICK
animation-delay CLICK
animation-iteration-count CLICK
animation-direction CLICK
animation-fill-mode CLICK
animation-play-state CLICK

ページトップへ

top > css3研究 > 
animation-duration

例1のアニメ設定

A : animation:ta_1 2s linear infinite;
B : animation:ta_1 2s linear infinite alternate;

例1のキーフレーム

@keyframes ta_1{
0%{top:0px;}
100%{top:50px;}
}

例2のアニメ設定

A : animation:ta_1 1s linear infinite alternate;
B : animation:ta_1 2s linear infinite alternate;
C : animation:ta_1 3s linear infinite alternate;
D : animation:ta_1 4s linear infinite alternate;

例3のアニメ設定

before : animation:ta_2 1s linear infinite;
after : animation:ta_2 10s steps(10,start) 1s infinite;

例3のキーフレーム

@keyframes ta_2{
0%{width:0px;}
100%{width:180px;}
}

Flexbox

flex flex-grow flex-shrink flex-basis

order

Transforms

perspective

perspective-origin

transform

transform-origin

SVG

fill fill-opacity

flood-color

lighting-color

marker-offset

stop-color stop-opacity

stroke stroke-dasharray stroke-dashoffset stroke-miterlimit stroke-opacity stroke-width

viewport-fill viewport-fill-opacity

update 2015.08.13
カテゴリMENU
お問い合せ