https://benzhub.github.io/tags/%E5%8B%95%E7%95%AB/Recent content in 動畫 on BenzHubHugozh-TWFri, 21 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/021-transitions-animations/Fri, 21 Aug 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/021-transitions-animations/<blockquote> <p>上一篇讓元素學會了放大、旋轉、翻面，這一篇讓這些動作真正「流暢起來」。<strong>TailwindCSS</strong> 的過渡與動畫系統分成兩大支柱：<strong>transition</strong>（過渡）負責把狀態切換（如 hover 變色、按鈕縮放）變得平順，由屬性（property）、時長（duration）、緩動（ease）、延遲（delay）四要素組成；<strong>animate</strong> 則提供自主循環的動畫，內建 <code>animate-spin</code>、<code>animate-ping</code>、<code>animate-pulse</code>、<code>animate-bounce</code> 四種常用效果，並可透過 <strong>@theme</strong> 搭配 <code>@keyframes</code> 定義專屬動畫。而 <strong>v4</strong> 更帶來 <code>@starting-style</code> 進場動畫、<code>transition-discrete</code> 離散屬性過渡，以及 <code>motion-safe</code>／<code>motion-reduce</code> 無障礙變體，讓動效既漂亮又體貼。</p> </blockquote>