All Posts
News bits
CSS Animation で display と content-visibility が適用可能に
CSS Animation で display と content-visibility が適用可能に
今までは display や content-visibility を keyframe に書いても適用されず、次のようなコードでは透明になるだけでしたが、これからは display が適用されるようになったため 100%になった段階で要素が消えます。段階的に display や content-visibility が変化するわけではありません。
@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/
実装例
著者について
Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.
In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.
In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.
In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.
I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.