サンプルの内容【例1 背景色変化】

一番最初だけ 1s 待った後、3sで背景色が 赤 → 緑 → 青 へと変化するアニメです。
animation-direction: alternate;なので、偶数回は 青 → 緑 → 赤 になります。
infinite なので、延々と上記を繰り返します。

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

サンプルの内容【例2 transformで回転と拡大縮小】

アニメの長さは1回4s。 ボックスが0deg、360deg(1回転)、180deg、0degに回転しながら2倍に拡大、2倍に拡大状態で360deg(1回転)というのを反転しながら延々繰り返すアニメです。

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

サンプルの内容【例3 左右移動アニメ】

アニメの長さは1回1s。 1回のアニメではボックスが左から右に移動するだけですが、0%と100%で[width: 30px]、通常は[width: 60px]にして、左右に到達した時に縮んで跳ね返るような印象になるようにしてみました。
左右移動は translate で移動させ、右側で縮む時には translate で縮む分だけ右に動かしてます。
この片道のアニメを alternate 指定で反転させているので、左右に跳ね返りながら動いているようなアニメになってます。

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

ネタコラム

cssアニメはアイデア次第で面白いものがいろいろ作れるのではないかと思います。
ただ、ブラウザのcss3対応が完全に統一されるまではベンダープレフィックスを付加した記述が必要になりますので（2014年1月現在）、例えばショートハンドプロパティ記述をしない場合、主な4種類でちゃんと書いてみると以下のようになります。

-webkit-animation-name: ta_1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: ta_1;
-moz-animation-duration: 3s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-ms-animation-name: ta_1;
-ms-animation-duration: 3s;
-ms-animation-timing-function: linear;
-ms-animation-delay: 1s;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: alternate;
-o-animation-name: ta_1;
-o-animation-duration: 3s;
-o-animation-timing-function: linear;
-o-animation-delay: 1s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
animation-name: ta_1;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;

ショートハンド記述は、
-webkit-animation: ta_1 3s linear 1s infinite alternate;
-moz-animation: ta_1 3s linear 1s infinite alternate;
-ms-animation: ta_1 3s linear 1s infinite alternate;
-o-animation: ta_1 3s linear 1s infinite alternate;
animation : ta_1 3s linear 1s infinite alternate;
となります。
アニメ設定はショートハンド記述できるので最大5行程度ですが、キーフレームの方はフレーム数が増えるとすごい量のソースになってしまう可能性があります。

@-webkit-keyframes ta_2{
0%{-webkit-transform: rotate(0deg) scale(1);}
25%{-webkit-transform: rotate(360deg) scale(1);}
50%{-webkit-transform: rotate(180deg) scale(1);}
75%{-webkit-transform: rotate(0deg) scale(2);}
100%{-webkit-transform: rotate(360deg) scale(2);}
}
@-moz-keyframes ta_2{
0%{-moz-transform: rotate(0deg) scale(1);}
25%{-moz-transform: rotate(360deg) scale(1);}
50%{-moz-transform: rotate(180deg) scale(1);}
75%{-moz-transform: rotate(0deg) scale(2);}
100%{-moz-transform: rotate(360deg) scale(2);}
}
@-ms-keyframes ta_2{
0%{-ms-transform: rotate(0deg) scale(1);}
25%{-ms-transform: rotate(360deg) scale(1);}
50%{-ms-transform: rotate(180deg) scale(1);}
75%{-ms-transform: rotate(0deg) scale(2);}
100%{-ms-transform: rotate(360deg) scale(2);}
}
@-o-keyframes ta_2{
0%{-o-transform: rotate(0deg) scale(1);}
25%{-o-transform: rotate(360deg) scale(1);}
50%{-o-transform: rotate(180deg) scale(1);}
75%{-o-transform: rotate(0deg) scale(2);}
100%{-o-transform: rotate(360deg) scale(2);}
}
@keyframes ta_2{
0%{transform: rotate(0deg) scale(1);}
25%{transform: rotate(360deg) scale(1);}
50%{transform: rotate(180deg) scale(1);}
75%{transform: rotate(0deg) scale(2);}
100%{transform: rotate(360deg) scale(2);}
}

cssアニメはそんなこんなのソースになってしまうので、例えば「50%のrotateを90degに変更」などと、つどつど変更しながらアニメをチェック、作成したりするのはかなりめんどくさい作業になるかと考えます。そこで、原森ではなるべく楽に作業できるようにソース作成ツールを作ってみました。（自分作業用ツールなので、キーフレームソース作成の方はかなり使いづらいかもしれませんが…）
【Animation ソース作成ツール】【keyframes ソース作成ツール】

追記：2017.10時点のベンダープレフィックスの状況

2014年に記事を書いた時から、ブラウザがかなりバージョンアップしましたので、
2017年10月時点でのベンダープレフィックスは、-webkit- のみを付加する感じで以下のようになっています。

-webkit-animation-name: ta_1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;

-webkit-animation: ta_1 3s linear 1s infinite alternate;
animation : ta_1 3s linear 1s infinite alternate;

@-webkit-keyframes ta_2{
0%{-webkit-transform: rotate(0deg) scale(1);}
25%{-webkit-transform: rotate(360deg) scale(1);}
50%{-webkit-transform: rotate(180deg) scale(1);}
75%{-webkit-transform: rotate(0deg) scale(2);}
100%{-webkit-transform: rotate(360deg) scale(2);}
}
@keyframes ta_2{
0%{transform: rotate(0deg) scale(1);}
25%{transform: rotate(360deg) scale(1);}
50%{transform: rotate(180deg) scale(1);}
75%{transform: rotate(0deg) scale(2);}
100%{transform: rotate(360deg) scale(2);}
}

animationのプロパティ

[animation:～;](ショートハンドプロパティ記述)で( -fill-mode , -play-state 以外を)一括設定も可。

animation-name

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

animation-duration

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

animation-timing-function

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

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

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

animation-iteration-count

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

animation-direction

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

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

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

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

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

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

animation-fill-mode

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

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

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

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

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

animation-play-state

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

ページトップへ