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

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

テーブルの数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

属性 Chrome IE Firefox Safari Opera
@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ルール

以下の状況で @keyframes ルール内でCSSスタイルが指定されると、アニメーションは特定の時間にわたって現在のスタイルから新しいスタイルに徐々に変更されます。

アニメーションが有効になるためには、アニメーションをある要素にバインドする必要があります。

以下の例では、「example」アニメーションを<div>要素にバインドします。アニメーションは4秒間続行し、<div>要素の背景色が「red」から「yellow」に徐々に変更されます：

实例

/* アニメーションコード */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* この要素にアニメーション効果を適用 */
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>要素の背景色が変更されます：

实例

/* アニメーションコード */
@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;
}

亲自试一试

以下の例では、アニメーションが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) - あなたが三次ベ塞尔関数で定義した値を実行します

以下の例では、使用できるさまざまな速度曲線を示しています：

实例

#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 - 最後のキーフレームで設定されたスタイルの値を保持します（animation-directionとanimation-iteration-countに依存）。
  • backwards - 要素は最初のキーフレームで設定されたスタイルの値を取得し（animation-directionに依存）、アニメーションの遅延中にその値を保持します。
  • 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;
}

亲自试一试

动画简写属性

下例使用六种动画属性：

实例

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 规定动画完成一个周期应花费的时间。
animation-fill-mode 规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count 规定动画应播放的次数。
animation-name 规定 @keyframes 动画的名称。
animation-play-state アニメーションが実行されるか停止されるかを定義します。
animation-timing-function アニメーションの速度曲線を定義します。