<ul data-line="0" class="code-line">
<li data-line="0" class="code-line">“待ち”を短く感じさせる：animate-pulse をスケルトンだけに当て、完了時は opacity のトランジションでふわっと差し替え</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/bf53bd61e7cd-20251004.gif" class="md-img" loading="lazy">
<ul data-line="5" class="code-line">
<li data-line="5" class="code-line">カードの“生き物感”：hover:scale-[1.01] ＋ hover:-translate-y-1 と遅めの ease-out。影も一緒に変える</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/1f1b7ae19b9a-20251004.gif" class="md-img" loading="lazy">
<ul data-line="9" class="code-line">
<li data-line="9" class="code-line">通知バッジは“控えめに脈打つ”：tailwindcss-animate ではなく、カスタム keyframes でゆっくり鼓動</li>
</ul>
<img src="https://storage.googleapis.com/zenn-user-upload/1109757ea502-20251004.gif" class="md-img" loading="lazy">

最近つくって楽しかったアニメーション（tailwindcss × animate）

Discussion