--- title: animation slug: Web/CSS/animation tags: - Animation - CSS - CSS アニメーション - CSS プロパティ - Reference - animation-delay - animation-direction - animation-duration - animation-fill-mode - animation-iteration-count - animation-name - animation-play-state - animation-timing-function translation_of: Web/CSS/animation ---
{{CSSRef}}

CSS の animation 一括指定プロパティは、スタイル間のアニメーションを適用します。これは {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}} の一括指定です。

{{EmbedInteractiveExample("pages/css/animation.html")}}
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

アニメーションできるプロパティの説明があります。この説明は言うまでもなく CSS トランジションにも有効です。

{{cssinfo}}

構文

animation プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。

それぞれ個別のアニメーションは以下のように定義されます。

各アニメーションの定義の中での順序は重要です。{{cssxref("<time>")}} として解釈される最初の値は、 {{cssxref("animation-duration")}} に、そして2番目の値は、{{cssxref("animation-delay")}} に割り当てられます。

順序はまた、各アニメーションの定義において、他のキーワードから {{cssxref("animation-name")}} の値を区別するためにも重要です。 {{cssxref("animation-name")}} 以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 {{cssxref("animation-name")}} ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な {{cssxref("animation-name")}}と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。

値

<single-animation-iteration-count>
アニメーションが実行される回数です。 {{cssxref("animation-iteration-count")}} で利用できる値の一つでなければなりません。
<single-animation-direction>
アニメーションが実行される方向です。 {{cssxref("animation-direction")}} で利用できる値の一つでなければなりません。
<single-animation-fill-mode>
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。 {{cssxref("animation-fill-mode")}} で利用できる値の一つでなければなりません。
<single-animation-play-state>
アニメーションが実行中かどうかを定めます。 {{cssxref("animation-play-state")}} で利用できる値の一つでなければなりません。

構文形式

{{csssyntax}}

例

台風の目

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

{{EmbedLiveSample('Cylon_Eye')}}

これ以外の例は CSS アニメーションを参照してください。

アクセシビリティの考慮事項

点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。

アニメーションを停止したり無効にしたりする仕組みを、できれば Reduced Motion Media Query を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。

仕様書

仕様書 状態 備考
{{SpecName('CSS3 Animations', '#animation', 'animation')}} {{Spec2('CSS3 Animations')}} 初回定義

ブラウザーの対応

{{Compat("css.properties.animation")}}

Quantum CSS のメモ

関連情報