【animation】いまいちわかりにくいCSS-animationのプロパティをまとめてみたで！

2016/06/09 2016/06/10

Pocket

CSS3のanimationをいろいろ試してみたが、どうにもわかりにくい。
プロパティが多い上に、意味がわからん。
そこで今回は各プロパティの中身と違いがわかるうように並べてまとめてみた。

animation-name

「animation-name」はその名の通り、「アニメーションの名前」だ。
「@keyframes」に「animation-name」とCSSスタイルを設定し、
アニメーションを適用させるクラスに指定する。
ちなみに初期値は「none」

「@keyframes」は以下のアニメーションにおいて下記すべて共通。

@keyframes sample{
	0% {width:0;background:#00abfb;}
	100% {width:100%;background:#1657fb;}
}

@keyframes sample{

0% {width:0;background:#00abfb;}

100% {width:100%;background:#1657fb;}

}

青い帯が若干の色調を変えながら横幅0%から100%まで伸びていくという単純なアニメーション。
目で見てわかりやすいように繰り返し再生を設定します。

基本アニメーション

div.anime1 {
	animation:sample 5s infinite;
}

div.anime1 {

animation:sample 5s infinite;

}

animation-name:sample;

animation-duration

「animation-duration」はアニメーション1回が実行される時間の長さ。
単位は「s」で1秒なら「1s」、5秒なら「5s」。
ちなみに初期値は0なので設定しないとアニメーションは実行されない。

animation-durationを5秒に設定

div.anime2 {
	animation:sample 5s linear infinite;
}

div.anime2 {

animation:sample 5s linear infinite;

}

基本アニメーションに「linear」を加えています。

animation-duration:5s;

animation-durationを10秒に設定

div.anime3 {
	animation:sample 10s linear infinite;
}

div.anime3 {

animation:sample 10s linear infinite;

}

上の5秒設定と比較するとわかりやすい。

animation-duration:10s;

animation-timing-function

「animation-timing-function」はアニメーションのタイミングと進行割合。
この値を変更することで滑らかな動きを設定できる。
初期値は「ease」
以下は値による違い。

「ease」開始と完了を滑らか

div.anime4 {
	animation:sample 5s ease infinite;
}

div.anime4 {

animation:sample 5s ease infinite;

}

animation-timing-function:ease;

「linear」一定速度

div.anime5 {
	animation:sample 5s linear infinite;
}

div.anime5 {

animation:sample 5s linear infinite;

}

animation-timing-function:linear;

「ease-in」ゆっくり始まる

div.anime6 {
	animation:sample 5s ease-in infinite;
}

div.anime6 {

animation:sample 5s ease-in infinite;

}

animation-timing-function:ease-in;

「ease-out」ゆっくり終わる

div.anime7 {
	animation:sample 5s ease-out infinite;
}

div.anime7 {

animation:sample 5s ease-out infinite;

}

animation-timing-function:ease-out;

「ease-in-out」ゆっくり始まってゆっくり終わる

div.anime8 {
	animation:sample 5s ease-in-out infinite;
}

div.anime8 {

animation:sample 5s ease-in-out infinite;

}

animation-timing-function:ease-in-out;

animation-delay

「animation-delay」はアニメーションのスタートするタイミング。
単位は「s」で同じく秒数で設定。
初期値は「0」でアニメーションは即開始される。
正の値を設定するとその時間分遅れてスタートし、
負の値を設定するとその時間分遡った途中から開始される。

開始を2秒後に設定

div.anime9 {
	animation:sample 5s linear infinite 2s;
}

div.anime9 {

animation:sample 5s linear infinite 2s;

}

animation-delay:2s;

通常

div.anime10 {
	animation:sample 5s linear infinite;
}

div.anime10 {

animation:sample 5s linear infinite;

}

animation-delay:0;

開始を2秒前開始の途中に設定

div.anime11 {
	animation:sample 5s linear infinite -2s;
}

div.anime11 {

animation:sample 5s linear infinite -2s;

}

並べてみると時間差になっているのがわかる。

animation-delay:-2s;

animation-iteration-count

「animation-iteration-count」はアニメーションの繰り返す回数。
初期値は「1」で負の値は適用されない。
「infinite」を設定することで、無限にループされる。

再生回数を3回に設定

div.anime12 {
	animation:sample 5s 3 ;
}

div.anime12 {

animation:sample 5s 3 ;

}

再生されない場合はリロードしてください。

animation-iteration-count:3;

animation-direction

「animation-direction」はアニメーションの交互反転再生の有無を設定。
初期値は「normal」で同じ再生を繰り返し、
「alternate」を設定すると、偶数回は反転で再生される。

通常の繰り返し再生

div.anime13 {
	animation:sample 5s infinite normal;
}

div.anime13 {

animation:sample 5s infinite normal;

}

animation-direction:normal;

交互に反転で再生

div.anime14 {
	animation:sample 5s infinite alternate;
}

div.anime14 {

animation:sample 5s infinite alternate;

}

animation-direction:alternate;

まとめ

以上、今回はCSSアニメーションのプロパティをまとめてみた。
青い帯がチカチカして目が痛いぜ。
なんでもっと目に優しい色にしなかったのか。

- CSS野郎