jQueryが登場して以来スライダーなどの動きのあるWebサイトがとても簡単に作れるようになりました。
しかし、最近はCSS3のみで動きがつけられるようなので、それを説明していきます。
ここのサンプルはAngularを使っています。
雛形
今回のアニメーションの対象となる要素を作成します。
<div id="box"></div>
#box{
width:100px;
height:100px;
background-color:blue;
}
青い四角が表示されれば成功です。
後は、jsを書かずにCSSのみで表現します。
色を変える
アニメーションを使って色を変えていきます。
#box{
width:100px;
height:100px;
background-color:blue;
animation-name: anime; /* 割り当てるアニメーションの名前 */
animation-duration: 3s; /* アニメーションの秒数 */
}
/* アニメーション */
@keyframes anime
{
100% {
background-color:red;
}
}
上記を走らせると、青かった四角がうっすらと赤に変わっていき3秒後完全な赤い四角になる。
追加したのは
・アニメーション
・アニメーションの割り当て
・アニメーションの秒数
の３つで、アニメーションの%は指定のタイミングで設定しているCSSの状態にすることができる。
この場合だと、長さを３秒で指定して、100%のタイミングで赤くなるようにしている。
また、３秒後に突然赤くなるのではなく、設定されているタイミングに向かって徐々に変わっていくのがアニメーションの最大の特徴になる。
スライドさせる
青い四角を右にスライドさせます。
#box{
width:100px;
height:100px;
background-color:blue;
position: relative; /* スライドさせるために必要*/
animation-name: anime; /* 割り当てるアニメーションの名前 */
animation-duration: 3s; /* アニメーションの秒数 */
}
/* アニメーション */
@keyframes anime
{
0% {
left: 0px;
}
100% {
left: 500px;
}
}
３秒かけて500px右にスライドする。
色の変更の時は100%のアニメーション指定だけあればアニメーションになったのに、0%を指定しないと瞬間移動してしまった。0%で初期値を設定するとアニメーションらしく滑ってくれたので0%を入れることを忘れずやりたい。
回転させる
四角を回転させる
#box{
width:100px;
height:100px;
background-color:blue;
animation-name: anime; /* 割り当てるアニメーションの名前 */
animation-duration: 3s; /* アニメーションの秒数 */
}
/* アニメーション */
@keyframes anime
{
100% {
transform:rotate(360deg);
}
}
3秒かけて四角が回転する。
360degは角度の指定なので数値を変えて自由に回転させる。
大きさを変更する
四角の大きさがゆっくりと変わっていきます。
#box{
width:100px;
height:100px;
background-color:blue;
animation-name: anime; /* 割り当てるアニメーションの名前 */
animation-duration: 3s; /* アニメーションの秒数 */
}
/* アニメーション */
@keyframes anime
{
100% {
transform:scale(0.1);
}
}
３秒後に10%の大きさまで小さくなります。
0.1は縮小の割合をしてしているのでこの数値を変更することで大きさを変えることができます。
繰り返しの回数を指定する
アニメーションの繰り返す回数を指定します。無限も可能です。
#box{
width:100px;
height:100px;
background-color:blue;
animation-name: anime; /* 割り当てるアニメーションの名前 */
animation-duration: 3s; /* アニメーションの秒数 */
animation-iteration-count: infinite; /* 無限に繰り返す */
/*animation-iteration-count: 2;*/ /* 2回繰り返す */
}
/* アニメーション */
@keyframes anime
{
100% {
transform:scale(0.1);
}
}
大きさが変わるアニメーションが無限に繰り返されます。
コメントにされている2を有効にして、infiniteをコメントにすれば２回だけの繰り返しに変更します。
動きの変更
スライドがおそらく一番違いがわかるのでスライドで説明します。
#box{
width:100px;
height:100px;
background-color:blue;
position: relative; /* スライドさせるために必要*/
animation-name: anime; /* 割り当てるアニメーションの名前 */
animation-duration: 3s; /* アニメーションの秒数 */
animation-timing-function: linear; /* 一定の動き*/
/*animation-timing-function: ease;*/ /* だんだん早くなる*/
/*animation-timing-function: ease-in;*/ /* よりだんだん早くなる*/
/*animation-timing-function: ease-out;*/ /* だんだん遅くなる*/
/*animation-timing-function: ease-in-out;*/ /* 中間が早い*/
}
/* アニメーション */
@keyframes anime
{
0% {
left: 0px;
}
100% {
left: 500px;
}
}
animation-timing-functionで動きのパターンを変えることができます。アニメーションの%を増やして指定することも可能ですが、ざっくり動きを変えておくときにご使用ください。
アニメーション再生後のスタイル
#box{
width:100px;
height:100px;
background-color:blue;
animation-name: anime; /* 割り当てるアニメーションの名前 */
animation-duration: 3s; /* アニメーションの秒数 */
animation-fill-mode:forwards; /* アニメーション終了時の形で止める*/
/*animation-fill-mode:none; /* アニメーション開始時の形で止める*/
}
/* アニメーション */
@keyframes anime
{
100% {
background-color:red;
}
}
アニメーションを１回だけ表示したりする場合に終了時で止めたい場合は
animation-fill-mode:forwardsをつけましょう。