Conversation

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

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

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

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

こんな誰も気づかない細かいところまで設計しています。