【CSS3】animationと@keyframesの使い方とは？transitionとの違いも解説
CSSアニメーションを使った、「動き」のあるwebサイトを作りたいと思ったことはありませんか？
基本的なCSSがわかっていても、アニメーションはコードの書き方が少し特殊で、何だか難しそうですよね？
今回、WEBCAMP NAVIは、今までなんとなくCSSアニメーションを避けていた、という方のために、CSSアニメーションの仕組みからメリット・デメリットまで丁寧に解説していきます。
- CSSアニメーションとは
- どういうコーディングをすればいいのか
- どういう時に使えるのか
以上の項目を説明していきます。
この記事を読めば、初心者の方でも「CSSアニメーションを使った動きのあるwebサイト」が作れるようになりますよ。ぜひ、最後までお読みください！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSアニメーションでは何ができる？
CSSアニメーションとは、@keyframesとanimationプロパティを用いて、簡単なキーフレームアニメーションを作成できる機能です。
@keyframesでアニメーションの中身を指定し、animationプロパティで指定したアニメーションの適用方法を指定します。
この@keyframesとanimationプロパティの両方の仕組みを覚えることが大事です。
@keyframesについて
@keyframesでは、アニメーションさせる要素の変化を指定することができます。
始めは左端にあったものが、少しずつ移動して、右端に行くというように、開始時と終了時の状態を記述します。
具体的には以下のように書きます。
@keyframes キーフレーム名 {
0% {
プロパティ:値;
}
100% {
プロパティ:値;
}
}
「@keyframes」の後に「キーフレーム名」を指定します。
キーフレーム名は任意の名前で決めることができます。
要素が回転する場合は「rotation」にするなど、動きに関連する名前を付けると良いでしょう。
アニメーション開始時の状態は0%、終了時の状態は100%の中で指定します。必要であれば、25%など途中のキーフレームを付け加えることもできます。
0%、100%はfrom、toで記述することもできます。
@keyframes name {
from {
opacity:0;
}
to{
opacity:1;
}
}
開始時は指定せず、終了時の指定のみでも動かすことができます。
@keyframes キーフレーム名 {
100% {
width: 1000px;
height: 400px;
}
}
animationプロパティ
animationプロパティでは、適用したアニメーションを開始するタイミングや終了までの時間、繰り返し回数などを指定します。
ボックス
@keyframesを一つ作っておくと、複数の要素でアニメーションの使いまわしができる
animationプロパティは全部で8つあります。
・animation-name（アニメーション・ネーム） アニメーションのキーフレーム名
・animation-duration アニメーションの開始から終了までの時間（秒）
・animation-timing-function アニメーションの進行速度の度合い
・animation-delay アニメーションが開始するタイミング
・animation-iteration-count アニメーションの繰り返し回数
・animation-direction アニメーションの再生方向
・animation-fill-mode アニメーション前後の状態
・animation-play-state アニメーションの一時停止・再生
機能を一つずつ説明していきます。
animation-nameプロパティ
animation-nameは、@keyframesで定義したキーフレーム名の指定ができます。
animation-nameの指定だけでは機能せず、次のanimation-durationを指定する必要があります。
animation-durationプロパティ
animation-durationは、アニメーションの開始から終了までにかかる時間を指定することができます。
具体的には秒数(s)とミリ秒(ms)で指定します。初期値は0sです。
0の場合も、単位を省略せずに0sと書く必要があります[/alert]@keyframes wideScale{
from {
width: 350px;
}
to {
width: 600px;
}
}
.box {
animation-name: wideScale;
animation-duration: 2s;
}
上記のコードでは、2秒間で幅が350pxから600pxまで変化します。
animation-timing-functionプロパティ
animation-timing-functionは、アニメーションの進行がどう変化するのかを指定します。
開始から終了まで一定の進行速度なのか、開始時は緩やかでだんだんと早くなるのかなど、指定できる値は、9つあります。
・ease 緩やかに開始し、緩やかに終了する
・ease-in 開始時のみ緩やかに変化する。
・ease-out 終了時のみ緩やかに変化する。
・ease-in-out easeよりさらに開始と終了が緩やかに変化する
・linear 一定の速度で変化する
・step-start 最初に終了時の状態になる
・step-end 最後に一瞬で終了時の状態になる
・steps(N, start または end) Nで指定した回数のコマ送りのアニメーションが作れる。第2引数に「start」を指定すると開始直後に始まり、「end」を指定すると、「animation-duration」で指定した時間経過後に始まる
・cubic-bezier(x1, y1, x2, y2)
コマ送りの例
表のうち、上位5つの値は、cubic-bezier(x1, y1, x2, y2)でも指定できます。
例えば、easeは、cubic-bezier(0.25, 0.1, 0.25, 1.0)、linearは、cubic-bezier(0.0, 0.0, 1.0, 1.0)と指定したものと同じ動きをします。
参考 CSS3リファレンスHTMLクリックリファレンスanimation-delayプロパティ
animation-delayは、アニメーションが開始する時間を指定できます。
animation-durationと同じく秒数(s)とミリ秒(ms)で指定します。初期値は0sです。
animation-delay: 3s; と指定すると、3秒後にアニメーションが開始します。
animation-iteration-countプロパティ
animation-iteration-countは、アニメーションの繰り返し回数を指定します。
animation-iteration-count: 5; と指定すると、5回まで繰り返されます。
初期値は1で、1.5などの小数点も可能です。無限ループさせたい場合は、infiniteを指定します。
animation-directionプロパティ
animation-directionは、アニメーションの再生方向を指定します。
初期値は「normal」となり、値は4つあります。
・normal アニメーションを順方向に再生
・reverse アニメーションを逆方向に再生
・alternate アニメーションがループする場合、順方向、逆方向を交互に繰り返の
・alternate-reverse alternateの反対で、逆方向、順方向を交互に繰り返す
animation-fill-modeプロパティ
animation-fill-modeは、アニメーションの前後の状態を指定します。
開始前、終了後にキーフレームで指定したスタイルを適用するかどうか決定することができます。
初期値はnoneとなり、値は4つあります。
・none キーフレームで指定したスタイルを適用しない
・forwards アニメーション終了後に、キーフレームで指定したアニメーション終了時(100%)の状態になる（逆再生の場合、0%の状態になる）
・backwards アニメーション開始前に、キーフレームで指定したアニメーション開始時(0%)の状態になる（逆再生の場合、100%の状態になる）
・both forwardsとbackwardsの両方が適用される
animation-play-stateプロパティ
animation-play-stateは、アニメーションの一時停止・再生を指定できます。
値は、runningとpasusedの2つで、pasusedのときにアニメーションが一時停止します。
値がrunningになると、停止した時点からアニメーションが再開します。
ボタンを作成し、クリックに応じて停止・再生を切り替えるときなどに使います。
animationプロパティ
animationプロパティを使うことで、これまでの指定を一括で行うことが可能です。
.box{
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
}
このプロパティは順不同で記述できますが、秒数で指定されるanimation-durationとanimation-delayは、順番に指定する必要があります。
1つ目がanimation-duration、2つ目がanimation-delayと処理されます。
animationとtransitionの違いは？使い分け方法
animationプロパティの他に、アニメーションを表現できるプロパティとして、transitionプロパティがあります。
2つの違いを紹介します。
・animationプロパティ
自動再生される
アニメーションの細かい設定ができる
繰り返し再生が可能
再生前後の状態を指定できる
・transitionプロパティ
1回きりで、繰り返し再生ができない。
ボタンにhoverするなどのきっかけが必要
再生後に元に戻る（指定ができない）
自動再生のいらない簡単なアニメーションの際にはtransitionプロパティを使い、開始のタイミングなど細かく設定するアニメーションにはanimationプロパティを使うと良いでしょう。
