animation
animation
は CSS の一括指定プロパティで、スタイルの間のアニメーションを適用します。これは animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
, animation-play-state
の一括指定です。
試してみましょう
構成要素のプロパティ
構文
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;
/* 2 つのアニメーション */
animation:
3s linear slidein,
3s ease-out 5s slideout;
animation
プロパティは 1 つまたはカンマで区切った複数のアニメーションとして指定します。
それぞれ個別のアニメーションは以下のように定義されます。
- 0 ~ 2 個の
<time>
の値 - 以下の値は 0 ~ 1 回出現します。
- アニメーションの名前は任意で、
none
,<custom-ident>
,<string>
のいずれかになります。
メモ: animation-timeline
、animation-range-start
、animation-range-end
は、現在の実装ではリセットのみであるため、現在のところこのリストには掲載されていません。つまり、 animation
があると、それ以前に宣言した animation-timeline
の値は auto
に、それ以前に宣言した animation-range-start
と animation-range-end
の値は normal
にリセットされますが、これらのプロパティを animation
で設定することはできません。 CSS スクロール駆動アニメーション を作成する場合、 animation
の一括指定を宣言した後に、これらのプロパティを宣言しなければ効果を得ることはできません。
値
<single-easing-function>
-
推移の形式を決定します。値は
<easing-function>
で利用できる値のいずれかでなければなりません。 <single-animation-iteration-count>
-
アニメーションが実行される回数です。
animation-iteration-count
で利用できる値の一つでなければなりません。 <single-animation-direction>
-
アニメーションが実行される方向です。
animation-direction
で利用できる値の一つでなければなりません。 <single-animation-fill-mode>
-
アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。
animation-fill-mode
で利用できる値の一つでなければなりません。 <single-animation-play-state>
-
アニメーションが実行中かどうかを定めます。
animation-play-state
で利用できる値の一つでなければなりません。
解説
それぞれのアニメーションの定義の中での順序は重要です。 <time>
として解釈される最初の値は animation-duration
に、そして 2 番目の値は、animation-delay
に割り当てられます。
それぞれのアニメーション定義内の他の値の順序も、 animation-name
値と他の値を判別するために重要です。もし animation
の一括指定の値が animation-name
以外のアニメーションプロパティの値として解釈できる場合、その値は最初のプロパティに適用され、 animation-name
には適用されません。このため、 animation
一括指定を使用する場合は、値のリストの最後の値として animation-name
の値を指定することをお勧めします。これは、animation
一括指定を使用してカンマで区切られた複数のアニメーションを指定する場合でも同様です。
アニメーションを適用するにはアニメーション名を設定する必要がありますが、animation
一括指定の値はすべてオプションで、それぞれの個別指定の animation
成分の既定値が設定されます。 animation-name
の初期値は none
です。つまり、animation
一括指定のプロパティで animation-name
の値が宣言されていない場合、どのプロパティにもアニメーションは適用されません。
animation-duration
値が animation
一括指定プロパティにおいて除外された場合、このプロパティの値は 0s
が既定値となります。この場合、アニメーションは発生しますが(animationStart
と animationEnd
イベントは発行されますが)、アニメーションは表示されません。
アクセシビリティの考慮
点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。
アニメーションを停止したり無効にしたりする仕組みを、できれば動きを縮小するメディアクエリーを使用して、アニメーションを削減した操作の設定を表明したユーザーの希望を叶えるように作成することができます。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | アニメーション不可 |
形式文法
animation =
<single-animation>#
<single-animation> =
<time [0s,∞]> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<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>
<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()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
例
メモ: CSS ボックスモデル プロパティのアニメーションは推奨されません。ボックスモデルのプロパティをアニメーションさせると、本質的に CPU に負荷がかかります。
日の出
ここでは、水色の空を昇る黄色い太陽をアニメーション化しています。太陽は ビューポートの中心まで上昇してから、下落して見えなくなります。
<div class="sun"></div>
:root {
overflow: hidden; /* 地平線下の部分の太陽を隠す */
background-color: lightblue;
display: flex;
justify-content: center; /* 太陽を背景の中心に配置する */
}
.sun {
background-color: yellow;
border-radius: 50%; /* 丸い背景を作成 */
height: 100vh; /* 太陽をビューポートの大きさにする */
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate sun-rise;
}
@keyframes sun-rise {
from {
/* ビューポートを通過して太陽を下に押し下げる */
transform: translateY(110vh);
}
to {
/* 太陽を既定の位置に戻す */
transform: translateY(0);
}
}
複数のプロパティのアニメーション
前回の例の太陽のアニメーションに追加して、太陽が昇ったり沈んだりするときの色を変える 2 つ目のアニメーションを追加します。太陽が地平線の下にあるときは暗い赤色から始まり、上に近づくにつれて明るいオレンジ色に変わります。
<div class="sun"></div>
:root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
animation: 4s linear 0s infinite alternate animating-multiple-properties;
}
/* 単一のアニメーションで複数のプロパティをアニメーションさせることができる */
@keyframes animating-multiple-properties {
from {
transform: translateY(110vh);
background-color: red;
filter: brightness(75%);
}
to {
transform: translateY(0);
background-color: orange;
/* 設定されていないプロパティ、つまり 'filter' は既定値に戻る */
}
}
複数のアニメーションの適用
水色の背景に昇ったり沈んだりする太陽。太陽は徐々に虹色に回転します。太陽の位置と色のタイミングは独立しています。
<div class="sun"></div>
:root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
/* 複数のアニメーションをカンマで区切り、各アニメーションの引数を個別に設定 */
animation:
4s linear 0s infinite alternate rise,
24s linear 0s infinite psychedelic;
}
@keyframes rise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes psychedelic {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
複数のアニメーションのカスケード
ここでは、水色の背景に黄色の太陽があります。太陽はビューポートの左側と右側の間で跳ね返ります。上昇アニメーションを定義しても、太陽はビューポートに残ります。上昇アニメーションの座標変換プロパティは、跳ね返るアニメーションによって「上書き」されます。
<div class="sun"></div>
:root {
overflow: hidden;
background-color: lightblue;
display: flex;
justify-content: center;
}
.sun {
background-color: yellow;
border-radius: 50%;
height: 100vh;
aspect-ratio: 1 / 1;
/*
カスケードの後半で宣言されたアニメーションは、
それ以前に宣言されたアニメーションのプロパティを上書きする
*/
/* 跳ね返りは上昇の座標変換を「上書き」するため、太陽は水平方向にしか移動しない */
animation:
4s linear 0s infinite alternate rise,
4s linear 0s infinite alternate bounce;
}
@keyframes rise {
from {
transform: translateY(110vh);
}
to {
transform: translateY(0);
}
}
@keyframes bounce {
from {
transform: translateX(-50vw);
}
to {
transform: translateX(50vw);
}
}
これ以外の例は CSS アニメーションを参照してください。
仕様書
Specification |
---|
CSS Animations Level 1 # animation |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS アニメーションの使用
- JavaScript の
AnimationEvent
API