Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

CSSアニメーション

CSSアニメーション

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

CSS

この章では、次のプロパティについて学習します。

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

アニメーションのブラウザーサポート

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

プロパティ
@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アニメーションとは

アニメーションを使用すると、要素をあるスタイルから別のスタイルに徐々に変更できます。

必要な数のCSSプロパティを何度でも変更できます。

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

キーフレームは、要素が特定の時点で持つスタイルを保持します。

@keyframesルール

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

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

次の例では、"example"アニメーションを<div>要素にバインドします。アニメーションは4秒間続き、<div>要素の背景色が「赤」から「黄色」に徐々に変化します。

例

/* The animation code */ @keyframes example {   from {background-color: red;} to {background-color: yellow;} } /* The element to apply the animation to */ div {   width: 100px;   height: 100px;   background-color: red;   animation-name: example;   animation-duration: 4s; }

自分で試してみる»

注：animation-durationプロパティは、アニメーションが完了するまでにかかる時間を定義します。もしanimation-durationプロパティが指定されていない場合、デフォルト値は0s(0秒)であるため、アニメーションは発生しません。

上記の例では、キーワード「from」と「to」(0%(開始)と100%(完了)を表す)を使用して、いつスタイルが変更されるかを指定しています。

パーセントを使用することもできます。パーセントを使用すると、スタイルの変更を好きなだけ追加できます。

次の例では、アニメーションが25%完了したとき、50%完了したとき、さらにアニメーションが100%完了したときに<div>要素のbackground-colorを変更します。

例

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

自分で試してみる»

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

例

/* アニメーションコード */ @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:0px; top:0px;} } /* アニメーションを適用させる要素 */ div {   width: 100px;   height: 100px;   position: relative;   background-color: red;   animation-name: example;   animation-duration: 4s; }

自分で試してみる»

アニメーションを遅らせる

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

次の例では、アニメーションを開始する前に2秒の遅延があります。

例

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

自分で試してみる»

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

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

例

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

自分で試してみる»

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

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

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

例

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

自分で試してみる»

次の例では、値「infinite」を使用して、アニメーションを永遠に継続させます。

例

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

自分で試してみる»

逆方向または交互のサイクルでアニメーションを実行する

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

animation-directionプロパティには、次の値を指定できます。

  • normal- アニメーションは通常どおり再生されます（転送）。これがデフォルトです
  • reverse- アニメーションが再生されます逆方向（後方）
  • alternate- アニメーションが再生されます最初に前進し、次に後退する
  • alternate-reverse- アニメーションが再生されます最初に後方に、次に前方に

次の例では、アニメーションを逆方向(後方)に実行します。

例

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

自分で試してみる»

次の例では、値「alternate」を使用して、アニメーションを最初に順方向に実行し、次に逆方向に実行します。

例

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

自分で試してみる»

次の例では、値「alternate-reverse」を使用して、アニメーションを最初に逆方向に実行し、次に順方向に実行します。

例

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

自分で試してみる»

アニメーションの速度曲線を指定する

animation-timing-functionプロパティは、アニメーションの速度曲線を指定します。

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

  • ease- 開始が遅く、次に速く、次にゆっくり終了するアニメーションを指定します (これがデフォルトです)。
  • linear- 最初から最後まで同じ速度のアニメーションを指定します
  • ease-in- スロースタートのアニメーションを指定
  • ease-out- スローエンドのアニメーションを指定
  • ease-in-out- 開始と終了が遅いアニメーションを指定します
  • cubic-bezier(n,n,n,n)- 3 次ベジエ関数で独自の値を定義できます

次の例は、使用できるさまざまな速度曲線の一部を示しています。

例

#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;}

自分で試してみる»

アニメーションの塗りつぶしモードを指定する

CSSアニメーションは、最初のキーフレームが再生される前または最後のキーフレームが再生された後、要素に影響を与えません。animation-fill-modeプロパティは、この動作をオーバーライドできます。

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

animation-fill-modeプロパティには、次の値を指定できます。

  • none- デフォルト値。アニメーションはしません実行前または実行後に要素にスタイルを適用する
  • forwards- 要素は最後のキーフレームによって設定されたスタイル値(アニメーションの方向によって異なります)およびアニメーションの反復回数)
  • backwards- 要素はスタイルを取得します最初のキーフレームによって設定される値(アニメーションの方向に依存)、およびアニメーション遅延期間中これを保持します
  • both- アニメーションは前方と後方の両方のルールに従います

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

例

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

自分で試してみる»

次の例では、アニメーションの開始前(アニメーションの遅延期間中)に、最初のキーフレームによって設定されたスタイル値を<div>要素に取得させます。

例

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

自分で試してみる»

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

例

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

自分で試してみる»

Animation Shorthandプロパティ

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

例

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

自分で試してみる»

上記と同じアニメーション効果は、animationプロパティの短縮形を使用して実現できます。

例

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

自分で試してみる»

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

次の表に、@keyframesルールとすべてのCSSアニメーションプロパティを示します。


プロパティ

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


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル