編集

CSS Animation で display と content-visibility が適用可能に

#Chrome #CSS #Animation

今までは display や content-visibility を keyframe に書いても適用されず、次のようなコードでは透明になるだけでしたが、これからは display が適用されるようになったため 100%になった段階で要素が消えます。段階的に display や content-visibility が変化するわけではありません。

css
@keyframes fade-out {
  100% {
    display: none;
    opacity: 0;
  }
}
.target {
  display: block;
  animation: fade-out 2s forwards;
}

今までこれを実現するためだけに、JavaScript を利用して className や style を付け替えるような実装が良く行われていました。

以下の記事では、これと Chrome 117 で予定されている新機能によってスムーズな出入りにアニメーションが実現できると言われています。

https://developer.chrome.com/blog/entry-exit-animations/

#実装例

https://stackblitz.com/edit/js-hodtra?file=style.css

編集