Mastodon 向けのCSSではフェードインを使ってるのですが、古くさい蛍光灯のように一発で明るくならないアニメーションにしています。

@keyframes fade{0%{opacity:1;}6%{opacity:0.5;}9%{opacity:0;}96%,to{opacity:1;}}

0% 完全に表示
6% 半透明表示
9% 未表示
96%~100% 完全に表示

これは一部ブラウザでは、キーフレームが 0% のまま固まる挙動が確認されているため、蛍光灯の電源を入れたようなアニメーションに敢えて設定しました。


Sign in to participate in the conversation

Server run by the main developers of the project 🐘 It is not focused on any particular niche interest - everyone is welcome as long as you follow our code of conduct!