CSS Animations

CSS Animations

CSSは、JavaScriptやFlashを使わずに、HTML要素のアニメーションを可能にします!

CSS

この章では、以下のプロパティについて学びます。

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Browser Support for Animations

表中の数字は、そのプロパティを完全にサポートしている最初のブラウザのバージョンを示しています。

プロパティ
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

CSS Animationsとは?

アニメーションとは、要素をあるスタイルから別のスタイルへと徐々に変化させるものです。

必要なCSSプロパティを、必要な回数だけ変更することができます。

CSSアニメーションを使用するには、まずアニメーション用のキーフレームを指定する必要があります。

@keyframesルール

CSSスタイルを@keyframesルールの中で指定すると、アニメーションは一定時間ごとに現在のスタイルから新しいスタイルへと徐々に変化していきます。

アニメーションを動作させるには、アニメーションを要素にバインドする必要があります。

次の例では、「example」アニメーションを<><div>要素の背景色を「赤」から「黄」へと徐々に変化させます。 red;}
to {background-color: yellow;}
}
/* アニメーションを適用する要素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Try it Yourself ”

注意: animation-durationanimation-durationプロパティが指定されていない場合、デフォルト値は0s（0秒）なので、アニメーションは発生しません。

上の例では、「from」と「to」というキーワード（0％（開始）と100％（完了）を表す）を使って、スタイルが変化するタイミングを指定していますが、

パーセントを使うこともできます。 パーセントを使うことで、何度でもスタイルの変更を加えることができます。

次の例では、アニメーションが25%完了したとき、50%完了したとき、そして100%完了したときに、<>要素の背景色を変更します。

Example

/* The Animation Code */
@keyframes example{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* アニメーションを適用する要素 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Try it Yourself ”

以下の例では、アニメーションが25%完了したとき、50%完了したとき、そして100%完了したときに、<>要素の背景色と位置の両方を変更します。

Example

/* The Animation Code */
@keyframes example{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:
}
/* アニメーションを適用する要素 */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

Try it Yourself ”

アニメーションを遅延させる

animation-delay プロパティは、アニメーションの開始を遅延させることを指定します。

次の例では、アニメーションを開始する前に2秒間の遅延を設定しています。

Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

Try it Yourself ”

負の値も可能です。 負の値を使用した場合、アニメーションはすでにN秒間再生されているかのように開始されます。

次の例では、アニメーションはすでに2秒間再生されているかのように開始されます：

Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration:

アニメーションの実行回数を設定する

animation-iteration-count プロパティは、アニメーションの実行回数を指定します。

次の例では、アニメーションを3回実行してから停止します。

Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:

次の例では、値「infinite」を使用して、アニメーションを永遠に続けるようにしています。

Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration:

アニメーションを逆方向または交互に再生する

animation-direction プロパティは、アニメーションを順方向、逆方向、または交互に再生するかどうかを指定します。

animation-directionプロパティには、次のような値を設定できます：

  • normal – アニメーションは通常（前方）に再生されます。 これはデフォルトです
  • reverse – アニメーションは逆方向（バックワード）に再生されます
  • alternate – アニメーションはまず前方に再生され、次に後方に再生されます。
  • alternate-reverse – アニメーションは最初に逆方向に再生され、次に前方に再生されます

以下の例では、アニメーションを逆方向（バックワード）に実行します。

Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration:

以下の例では、値「alternate」を使用して、アニメーションを最初に前に走らせ、次に後ろに走らせています。

Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}

Try it Yourself ”

以下の例では、値「alternate-reverse」を使用して、アニメーションを最初に逆方向に動かし、次に逆方向に動かすようにしています。

Example

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}

Try it Yourself ”

Specify the Speed Curve of the Animation

animation-timing-function プロパティでは、アニメーションのスピードカーブを指定します。

animation-timing-functionプロパティには、次のような値を設定できます。

  • ease – アニメーションの開始が遅く、次に速く、次に遅く終わるように指定します。
  • linear – 開始から終了まで同じ速度のアニメーションを指定する
  • ease-in – 開始が遅いアニメーションを指定する
  • ease-out – 終了が遅いアニメーションを指定する

    • i

  • ease-in-out – ゆっくりとした開始と終了のアニメーションを指定する
  • cubic-bezier(n,n,n,n) – 立方体のベジェール関数で独自の値を定義できる

以下の例では、使用可能なさまざまな速度曲線を示します。

Example

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
#div5 {animation-timing-function:

Try it Yourself ”

Specify the fill-mode For an Animation

CSSのアニメーションは、最初のキーフレームが再生される前や、最後のキーフレームが再生された後は、要素に影響を与えません。

animation-fill-mode プロパティは、アニメーションが再生されていないとき（開始前、終了後、またはその両方）のターゲット要素のスタイルを指定します。

animation-fill-modeプロパティは以下の値を持つことができます：

  • none – デフォルト値。
  • forwards – 要素は、最後のキーフレームで設定されたスタイル値を保持します (animation-
  • backwards – この要素は、最初のキーフレームで設定されたスタイル値を取得します(アニメーションの方向性に依存)。
  • both – アニメーションは、前方と後方の両方のルールに従います。

次の例では、<> 要素がアニメーションの終了時に最後のキーフレームからのスタイル値を保持するようにしています。

Example

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

Try it Yourself ”

以下の例では、<div>要素に、アニメーションが始まる前の最初のキーフレームで設定されたスタイル値を取得させます（アニメーションの遅延期間中）。

Example

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}

Try it Yourself ”

以下の例では、<> 要素が、アニメーション開始前の最初のキーフレームで設定されたスタイル値を取得し、アニメーション終了時に最後のキーフレームのスタイル値を保持するようにしています。

Example

div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration:
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}

Try it Yourself ”

Animation Shorthand Property

以下の例では、アニメーションのプロパティのうち6つを使用しています。

Example

div{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}。

Try it Yourself ”

上記と同様のアニメーション効果は、省略可能な animation プロパティを使用することで実現できます。

Example

div{
animation: example 5s linear 2s infinite alternate;
}

Try it Yourself ”

Test Yourself with Exercises!

CSS アニメーションのプロパティ

以下の表は、@keyframes ルールとすべての CSS アニメーションのプロパティの一覧です。

プロパティ 説明
@keyframes アニメーションコードの指定td アニメーションのコードを指定します
animation すべてのアニメーション・プロパティを設定するためのショートハンド・プロパティです
animation-delay アニメーション開始の遅延を指定します
animation-direction アニメーションが前方、後方、または交互に再生されるかどうかを指定します。
animation-duration アニメーションが1つのサイクルを完了するのにかかる時間を指定します
animation-fill-mode アニメーションが再生されていないときの要素のスタイルを指定します(開始前。 終了後。
animation-iteration-count アニメーションが再生される回数を指定します
animation-name @keyframesのアニメーションの名前を指定します
animation-play-?state アニメーションが実行されているか、一時停止しているかを指定します
animation-timing-function アニメーションのスピードカーブを指定します

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です