この回答は、通常不透明な白色とされているキャンバスが、opacity
プロパティの変化の過程で透けて表示されない、という問題に対する回答です。もし質問への回答になっていない場合は無視してください。
HTML 文書において、body
要素に設定された background
プロパティの計算値は、ルート要素である html
要素へ伝播され、本来の body
要素の background
プロパティは初期値として扱われます[1]。これは、body
要素に指定した背景関連のプロパティは html
要素へ設定されたかのように振る舞う、ということを意味しています。
このことから、 body
要素に設定した background: red
および background: blue
の 2 つのスタイルは、html
要素へ設定されたかのように振る舞うと理解できます。仕様上、ルート要素である html
要素の背景はキャンバスの背景となります[2]。つまり、キャンバスの不透明な白色の背景は、body
要素から伝播された background
プロパティによって上書きされるということです。これがキャンバスが opacity
プロパティの変化の過程で透けて表示されない原因です。
この問題の解決策は、html
要素に明示的に背景を指定することです。今回は問題が生じませんが、body
要素で明示的に高さを設定する必要がある点に注意してください。
§ 2.11.2. The Canvas Background and the HTML <body>
Element[1]
For documents whose root element is an HTML HTML element or an XHTML
html element [HTML]: if the computed value of background-image on the
root element is none and its background-color is transparent, user
agents must instead propagate the computed values of the background
properties from that element’s first HTML BODY or XHTML body child
element. The used values of that BODY element’s background properties
are their initial values, and the propagated values are treated as if
they were specified on the root element. It is recommended that
authors of HTML documents specify the canvas background for the BODY
element rather than the HTML element.
§ 2.11.1. The Canvas Background and the Root Element[2]
The background of the root element becomes the canvas background and
its background painting area extends to cover the entire canvas.
However, any images are sized and positioned relative to the root
element as if they were painted for that element alone. (In other
words, the background positioning area is determined as for the root
element.) The root element does not paint this background again, i.e.,
the used value of its background is transparent.
html {
background-color: white; /* 追加 */
}
body {
animation: blackout 6s infinite;
height: 100vh;
margin: 0;
padding: 0;
}
@keyframes blackout {
0% {
background: red;
opacity: 1;
}
50% {
background: blue;
opacity: 0;
}
100% {
background: red;
opacity: 1;
}
}
<div>
</div>