アニメーションと言えばJavaScriptを思い浮かべる方も多いと思いますが、CSSでも作成可能です。
今回はCSSアニメーションについて解説していきます。
ぜひ、最後まで見ていってください！
CSSアニメーションとは？
CSSで動きを付けることができるプロパティは大きく分けて２つあります。
- transitionプロパティを使用して作るもの
- animationプロパティを使用して作るもの
transitionプロパティの特徴
- 始めと終わりの２点の間でしかアニメーション指定ができない
- 自動再生はできず、ホバーアクションなどのきっかけが必要
- ループできない
animationプロパティの特徴
- 設定する時間の中で始めと終わり以外に細かく変化させるタイミングを設定できる
- きっかけが必要なく、自動で再生できる
- ループが可能
アニメーションプロパティについて
CSSのアニメーションはanimationプロパティと@keyframeを組み合わせることで作成することができます。
@keyframeではどのように変化させるのかを指定し、animationプロパティでは再生する回数や秒数を指定し、@keyframeを呼び出します。
animationプロパティは全部で８種類あります。
animation-name
@keyframeで使用するアニメーションの名前を指定します。
animation-name: sample;animation-duration
アニメーション１回の長さを指定します。
1秒 = 1sのように「s (seconds)」や「ms (milliseconds)」を単位として使用します。
初期値は「0s」です。
animation-duration: 1s;animation-timing-function
アニメーションの指定された時間内の進み方を指定するものです。
初期値は「ease」です。
animation-timing-function: ease;主な値は以下になります。
①ease
開始が少しゆっくりになり、終了も少しゆっくりになります。
②ease-in
開始はゆっくりでその後は等速になります。
③ease-out
開始は等速で終了はゆっくりになります。
④ease-in-out
開始と終了がゆっくりになり、easeより速度の変化がはっきりしています。
⑤linear
開始から終了まで等速になります。
animation-delay
アニメーションが開始するまでの時間を指定します。
これも「s」や「ms」を単位として使用します。
初期値は「0s」です。
animation-delay: 1s;animation-iteration-count
アニメーションを再生する回数を指定します。
無限に再生したい場合は「infinite」を指定します。
初期値は「1」です。
animation-interation-count: 2;
animation-interation-count: infinite; //無限animation-direction
アニメーションの方向を指定します。
animation-interation-countでinfinite(無限)を指定してループさせた場合にのみ指定できる値です。
初期値は「normal」です。
animation-direction: reverse;①normal
順方向に動き続けます。
②reverse
逆方向に動き続けます。
③alternate
順方向と逆方向に交互に動き続けます。
④alternate-reverse
開始時が逆方向で順方向と逆方向に交互に動き続けます。
animation-fill-mode
アニメーションの開始前と終了後の状態を指定します。
初期値は「none」です。
animation-fill-mode: backwards;①none
アニメーション前後のスタイルは適用されません。
②forwards
アニメーション終了後、最後のkeyframeで指定されたスタイルが適用されます。
③backwards
アニメーション終了後、最初のkeyframeで指定されたスタイルに戻ります。
④both
forwardsとbackwardsの両方が適用されます。アニメーション開始前はkeyframeで最初に指定されたスタイル、アニメーション終了後はkeyframeで最後に指定されたスタイルが適用されます。
animation-play-state
アニメーションの再生と一時停止を指定します。
クリックアクションやホバーアクションなどと一緒に使用します。
初期値は「running」です。
animation-play-state: paused;①running
アニメーションを再生します。
②paused
アニメーションを一時停止します。
@keyframeについて
@keyframeは以下のように記述します。
アニメーションの名前は@keyframeの後に記述して呼び出します。
@keyframes sample{
0%{
/** ここに開始時のスタイルを記述 **/
}
100%{
/** ここに終了時のスタイルを記述 **/
}
}小刻みにアニメーションを設定することが可能です。
@keyframes animetion01 {
0% {
/** ここに開始時のスタイルを記述 **/
}
15% {
/** ここに間のスタイルを記述 **/
}
75% {
/** ここに間のスタイルを記述 **/
}
100% {
/** ここに終了時のスタイルを記述 **/
}
}始めと終わりのみを指定する場合は次のように記述することも可能です。
@keyframes sample{
from{
/**ここに開始時のスタイルを記述**/
}
to{
/**ここに終了時のスタイルを記述**/
}
}まとめ
今回はCSSアニメーションについて解説してきました。
いかがだったでしょうか？
JavaScriptを使用しなくても簡単にCSSで作成できるアニメーションもあるので、上手に使い分けるといいでしょう。
別投稿にてCSSの知識やJavaScriptについても解説していますので、ぜひチェックしてみてください！
コメント