Contents
CSSアニメーションとは
CSSアニメーションとは、スタイルだけでアニメーションさせるCSSの技法になります。
Javascriptを知らなくてもCSSを使えればアニメーションをさせることが可能です。さらにJavascriptと違い、負荷が少なくスムーズにアニメーションさせることができるのもCSSアニメーションの特徴です。
アニメーションの設定
アニメーションは、下記の2 種類の要素で構成されています。
・アニメーションについて記述するスタイル
・アニメーションの先頭と末尾の CSS スタイルを示すキーフレーム
animationプロパティ
アニメーションの構成要素の１つアニメーションに記述するスタイル。
それに設定を行うのがanimationプロパティです。
.animation {
animation-name: fadeIn;
animation-fill-mode:backwards;
animation-duration:3s;
animation-iteration-count:infinite;
animation-timing-function:ease;
animation-delay: 0.5s;
animation-direction:normal;
}上から順に解説していきます
animation-name: fadeIn;アニメーションのキーフレームの名前を指定することができます。
キーフレームは＠にanimation-nameで指定した名前を組み合わせて使用します。
animation-fill-mode: none;/*初期値*/
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;アニメーションの実行前後に、指定したスタイルを適用するかを設定します。
animation-duration:3s;
animation-duration: 120ms;1 回のアニメーションサイクルに要する時間の長さを設定します。
animation-iteration-count:infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.4;アニメーションさせる回数を指定することができます。
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;アニメーションの動き方を指定することができます。
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;読み込まれてからアニメーションを開始するまでの時間を指定することができます。
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;アニメーションの方向を指定することができます。
animation-play-state: running;
animation-play-state: paused;アニメーションの停止・再開ができます。
途中で停止した場合は、停止した場所でアニメーションが止まり、再開すると停止した場所からまたアニメーションがはじまります。
まとめて設定しよう
animationプロパティは上記のプロパティ達を一括で指定することができます。
アニメーションを2つ以上組み合わせる時は、カンマで区切ります。
/* duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* name | duration | easing-function | delay */
animation: slidein 3s linear 1s;
/* name | duration */
animation: slidein 3s;
/* ２つのアニメーション */
animation: slidein1 3s linear 1s,slidein2 3s linear 1s;;アニメーションを定義しよう
animation-nameにつけた定義名に対し、keyframesでアニメーションの開始から終了までの変化を指定することで、アニメーションさせることが可能になります。
@keyframes name {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}0%や100％だけでなく、その間の数値なら全て設定する事ができます。
この定義にどんなCSSを記述するかで、アニメーションが変わってくるので、自分がさせたいアニメーションの値を入力しましょう。
アニメーションの例
フェードインテキスト
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
スライドアニメーション
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
ホバーすると光るアニメーション
See the Pen Untitled by 古澤 良汰 (@ryotarofu) on CodePen.
