animation プロパティ (CSS)
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年9月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
animation は CSS の一括指定プロパティで、スタイル間のアニメーションを適用します。これは animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の一括指定です。
試してみましょう
animation: 3s ease-in 1s infinite reverse both running slide-in;
animation: 3s linear 1s infinite running slide-in;
animation: 3s linear 1s infinite alternate slide-in;
animation: 0.5s linear 1s infinite alternate slide-in;
<section class="flex-column" id="default-example">
<div id="example-element"></div>
</section>
#example-element {
background-color: #1766aa;
margin: 20px;
border: 5px solid #333333;
width: 150px;
height: 150px;
border-radius: 50%;
}
@keyframes slide-in {
from {
margin-left: -20%;
}
to {
margin-left: 100%;
}
}
構成要素のプロパティ
このプロパティは以下のプロパティの一括指定です。
構文
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;
/* 2 つのアニメーション */
animation:
3s linear slide-in,
3s ease-out 5s slide-out;
値
このプロパティは、<animation> 値のカンマ区切りリストとして指定し、それぞれの値は以下の値の空白区切りリストとなります。
<keyframes-name>またはnone-
要素に適用するアニメーションを指定する
@keyframesアットルールの名前です。animation-nameの初期値はnoneです。 <animation-duration>-
アニメーションが1サイクル分を完了するまでの時間を指定します。値は、
animation-durationで利用できる値のいずれかでなければなりません。初期値は0sです。 <easing-function>-
推移の種類を決定します。値は
animation-timing-functionで利用できる値のいずれかでなければなりません。初期値はeaseです。 <animation-delay>-
要素にアニメーションを適用してから、そのアニメーションの実行が始まるまでの待機時間を指定します。値は、
animation-delayで利用できる値のいずれかでなければなりません。初期値は0sです。 <single-animation-direction>-
アニメーションが実行される方向です。
animation-directionで利用できる値のいずれかでなければなりません。animation-directionの初期値はnormalです。 <single-animation-iteration-count>-
アニメーションが実行される回数です。
animation-iteration-countで利用できる値のいずれかでなければなりません。animation-iteration-countの初期値は1です。 <single-animation-fill-mode>-
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。
animation-fill-modeで利用できる値のいずれかでなければなりません。 <single-animation-play-state>-
アニメーションが実行中かどうかを定めます。
animation-play-stateで利用できる値のいずれかでなければなりません。animation-play-stateの初期値はrunningです。 <single-animation-timeline>-
アニメーションの進行を制御するために使用するタイムラインを指定します。この値は、
animation-timelineで利用できる値のいずれかでなければなりません。初期値はautoです。
解説
animation プロパティは、カンマで区切られた 1 つ以上の単一のアニメーションとして指定されます。カンマ区切りのアニメーションリストに含まれるそれぞれの animation は、animation-name、animation-duration、animation-timing-function、animation-delay、 animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state、animation-timeline を設定します。いずれかの要素が animation 宣言に含まれていない場合、その要素の値は初期値に設定されます。
animation-name
それぞれのアニメーションの <animation-name> 成分は、アニメーションの名前であり、none、<custom-ident>、<string> のいずれかになります。animation-name の初期値は none です。つまり、animation 一括指定プロパティで animation-name の値が宣言されていない場合、どのプロパティに対してもアニメーションは適用されません。
アニメーション定義内のその他の値の順序は、animation-name の値を他の値から区別する上で重要です。animation 一括指定内にある値が、animation-name 以外のアニメーションプロパティの値として解釈される場合、その値は animation-name ではなく、そのプロパティにまず適用されます。このため、animation 一括指定を使用する際は、animation-name の値を値リストの最後に指定することを推奨します。これは、animation 一括指定を使用してカンマ区切りで複数のアニメーションを指定する場合でも同様です。
時間値
アニメーションごとに、<time> の値を 0 回、1 回、または 2 回含めることができます。それぞれのアニメーション定義内での時間値の順序は重要です。<time> として構文解析可能な 1 つ目の値は animation-duration に、2 つ目となる値は animation-delay に代入されます。
animation-duration 値が animation 一括指定プロパティにおいて除外された場合、このプロパティの値は 0s が既定値となります。この場合、アニメーションは発生しますが（animationStart と animationEnd イベントは発行されますが）、アニメーションは表示されません。
animation-timeline
<animation-timeline> が animation 一括指定に含まれていない場合、その一括指定の宣言によって、以前に宣言された animation-timeline の値はすべて auto にリセットされます。これにより、タイムラインはデフォルトの documentTimeline に設定されます。
<animation-timeline> の値が含まれているものの、ユーザーエージェントが一括指定内の <animation-timeline> の値に対応していない場合、animation 宣言全体が無効とみなされ、無視されます。このため、CSS スクロール駆動アニメーションを作成する場合、 animation 一括指定の後で animation-timeline プロパティを宣言しなければ効果を得ることはできません。
あるいは、<animation-timeline> を animation 一括指定内で設定するものを CSS の @supports ブロック内で宣言することも可能です。例えば、次のようにします。
@supports (animation: view()) {
/* `animation` 一括指定内の <animation-timeline> に対応しているブラウザー向けの CSS */
}
animation-fill-mode と新しい重ね合わせコンテキスト
animation-fill-mode の値が forwards の場合、アニメーションするプロパティは、設定された will-change プロパティの値に記載されているかのように動作します。アニメーション中に新しい重ね合わせコンテキストが作成された場合、アニメーションの完了後も、対象要素は重ね合わせコンテキストを保持します。
アクセシビリティ
点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。
アニメーションを停止したり無効にしたりする仕組みを、できれば動きを縮小するメディアクエリーを使用して、アニメーションを削減した操作の設定を表明したユーザーの希望を叶えるように作成することができます。
- Designing Safer Web Animation For Motion Sensitivity via A List Apart (2015)
- An Introduction to the Reduced Motion Media Query via CSS-Tricks (2017)
- Responsive Design for Motion via WebKit (2017)
- MDN WCAG を理解する、ガイドライン 2.2 の解説
- Understanding WCAG Success Criterion 2.2.2: Pause, Stop, Hide via W3C (2026)
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | アニメーション不可 |
形式文法
animation =
<single-animation>#
<single-animation> =
<'animation-duration'> ||
<easing-function> ||
<'animation-delay-start'> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ] ||
<single-animation-timeline>
<animation-duration> =
[ auto | <time [0s,∞]> ]#
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<animation-delay-start> =
<time>#
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<single-animation-timeline> =
auto |
none |
<dashed-ident> |
<scroll()> |
<view()>
<linear-easing-function> =
linear |
<linear()>
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>
<step-easing-function> =
step-start |
step-end |
<steps()>
<scroll()> =
scroll( [ <scroller> || <axis> ]? )
<view()> =
view( [ <axis> || <'view-timeline-inset'> ]? )
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<scroller> =
root |
nearest |
self
<axis> =
block |
inline |
x |
y
<view-timeline-inset> =
[ [ auto | <length-percentage> ]{1,2} ]#
<integer> =
<number-token>
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<length-percentage> =
<length> |
<percentage>
例
メモ: CSS ボックスモデル プロパティのアニメーションは推奨されません。ボックスモデルのプロパティをアニメーションさせると、本質的に CPU に負荷がかかります。代わりに transform プロパティのアニメーションを検討してください。
基本的な使い方: 日の出
この例では、animation 一括指定の使い方として、水色の空を横切る黄色い太陽のアニメーションを例に挙げます。太陽はビューポートの中央まで昇り、その後、画面から消えていきます。
HTML
太陽を表すために、単一の <div> 要素を記載します。
<div class="sun"></div>
CSS
まず、太陽と空を作成します。空は HTML 文書の :root です。 overflow を hidden に設定することで、ビューポートの外側にあるコンテンツ、この場合は太陽の地平線より下にある部分を非表示にします。同時に、justify-content プロパティを使用して、太陽を背景の中央に配置します。太陽の色を黄色にし、height をビューポートの高さ (100vh) に設定し、aspect-ratio を 1 に設定して幅を高さと等しくします。さらに、border-radius プロパティを使用して、正方形の <div> を円に変えます。
:root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1;
animation: 4s linear 0s infinite alternate sunrise;
}
次に、適用された要素をビューポートの下まで押し下げ、その後 CSS 座標変換を使用して、その要素をデフォルトの位置に戻すアニメーション @keyframes を定義します。
@keyframes sunrise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
最後のステップは、アニメーションを適用することです。animation 一括指定プロパティを使用して、sunrise キーフレームアニメーションを .sun の <div> に適用します。アニメーションは無限に繰り返し再生されるように設定されており、それぞれの再生時間は 4 秒です。また、アニメーションの方向は繰り返しごとに交互に変わります。
.sun {
animation: 4s linear 0s infinite alternate sunrise;
}
結果
複数のプロパティのアニメーション
この例では、単一の要素に複数のアニメーションを適用する方法を示します。水色の背景の上で太陽が昇ったり沈んだりする前回の例をさらに発展させ、ここでは太陽の色を徐々に変化させて虹色を巡回させていきます。太陽の位置と色の変化のタイミングは互いに独立しています。
前回の例と同じ HTML と CSS を記載し、2 つ目のアニメーション @keyframes として、hue-rotate() フィルター関数を使用して、色相をすべての可能な値にわたって巡回させる filter を適用するものを追加します。
@keyframes psychedelic {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
次に、これらの2つのアニメーションを太陽に適用します。複数のアニメーションをカンマで区切り、それぞれのアニメーションの引数は別個に設定します。
.sun {
animation:
4s linear 0s infinite alternate sunrise,
24s linear 0s infinite psychedelic;
}
結果
複数のアニメーションのカスケード
この例では、複数のアニメーションが同じプロパティの値を定義した場合に何が起こるかを示しています。この例は、基本的な使い方の例をさらに発展させたもので、どちらも transform の値を設定する 2 つのアニメーションを適用しています。
最初の例と同じ HTML と CSS を使用します。これには、元の sunrise アニメーションに加え、bounce という名前付きの 2 つ目のアニメーションも含まれます。これら 2 つのアニメーションは、同じプロパティの値を宣言しています。
@keyframes sunrise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes bounce {
from {
transform: translateX(-50vw);
}
to {
transform: translateX(50vw);
}
}
両方のアニメーションを太陽に適用します。2つのアニメーションが同じプロパティに異なる値を適用する場合、カスケードにおいて後に宣言されたアニメーションが、以前に宣言されたアニメーションを上書きします。この場合、transform 値については bounce アニメーションのカスケードにおいて優先され、sunrise で設定された transform を上書きするため、太陽は水平方向のみに移動することになります。
.sun {
animation:
4s linear 0s infinite alternate sunrise,
4s linear 0s infinite alternate bounce;
}
結果
太陽がビューポートの左側と右側の間を行き来しています。sunrise アニメーションが定義されているにもかかわらず、太陽はビューポート内に留まったままです。sunrise アニメーションの transform プロパティは、この跳ね返りアニメーションによって上書きされています。
仕様書
| 仕様書 |
|---|
| CSS Animations Level 1 # animation |
ブラウザーの互換性
関連情報
- CSS アニメーションの使用
- CSS アニメーションモジュール
- CSS スクロール駆動アニメーションモジュール
- JavaScript の
AnimationEventAPI