內容簡介
此外掛可自動為你的網站/部落格及 WordPress 後台添加 CSS3 轉場效果。連結等等在正常及移上狀態之間將會獲得動畫效果。CSS3 轉場效果在大多數主要瀏覽器的最新版本中得到支持（Chrome、Internet Explorer 10、Firefox、Opera、Safari）；不支援的瀏覽器將繼續以之前的方式呈現所有內容。此外掛會添加轉場效果（動畫效果）至所有已定義移上或焦點狀態的 <a>（連結）、<li>（列表項目，通常用於導航菜單）、<img>（圖像）和 <input>（表單字段及按鈕）標籤（例如，當滑鼠移上時，如果連結改變顏色）。其他「按鈕」、表單元素和 WordPress 特定的選擇器也會被選取。轉場效果持續時間為 0.2 至 0.3 秒，因此它們不應該穿越好與分心之間的線；但是，依賴於主題中使用的顏色，轉場效果可能不會明顯。
此外，請注意，圖像精靈(sprite)與通用 CSS3 轉場效果不相容。如果你看到圖像在其正常和移上狀態之間滾動時出現奇怪的動畫，它們正在使用精靈。根據精靈使用的位置，有各種方法可以避免這些元素上的行為，同時在需要時保留轉場效果。一種方法是將内嵌樣式屬性添加到這些元素中：style="transition: none; -webkit-transition: none;"。在你的主題中添加 CSS 將覆寫插件的 CSS，只要你按類別或 ID 對精靈使用元素進行定位。
如果您有任何功能建議，請隨時向我提出，我會在未來的版本中考慮它们。
CSS3 轉場效果 UX 理論
由於我們的大腦處理圖像的方式，簡單地說，即刻/突然的變化通常不如更緩和的變化更容易被感知。在物理空間中，我們永遠不會看到即刻的改變，例如 PowerPoint 中沒有動畫的幻燈片變化，但是在數位技術中，這是一個非常普遍的做法。例如，當網站使用移上狀態時，如果鼠標經過時連結更改顏色，它們會呈現小而即刻的視覺變化。添加 CSS3 轉場效果使這些變化更緩和，因此對眼睛更加友好。出於同樣的原因，操作系統現在傾向於使用大量動畫。這些概念背後有很多神經科學，但我不太熟悉它們。基本上，微小的動畫通常比突然的變化更好看。有些人會認為轉場效果不夠「靈敏」或看起來表現遲緩，但如果是這樣的話，只是調整動畫時間函數和持續時間的問題。
外掛標籤
開發者團隊
原文外掛簡介
This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin. Links, etc. get animated transitions between their normal and hover states. CSS3 Transitions are supported by the most recent version of every major browser (Chrome, Internet Explorer 10, Firefox, Opera, Safari); browsers without support will continue to render everything as they had before. This plugin adds the transitions (eye candy) to all (link),
Also, please note that image sprites simply don’t work well with blanket css3 transitions. If you see wierd animations where images scroll between their normal and hover states, they’re using sprites. Depending on where the sprites are used, there are various ways to prevent the behavior on those elements, while retaining transitions where desired. One method is to add an inline style attribute to those elements: style="transition: none; -webkit-transition: none;". Adding the css to your theme will override the plugin’s css as long as you target the elements using sprites by class or id.
Please feel free to offer any feature suggestions you might have and I will consider them for future releases.
CSS3 Transitions UX Theory
Because of the way our brains process images, in simple terms, instant/sudden changes are generally not as well perceived as more gradual ones. In the physical space, we never see instant changes, like slides changing with no animation in a PowerPoint, but with digital technology this is a very common practice. When websites make use of hover states, for example, if a link changes color when the mouse hovers over it, they exhibit small, but instant visual changes. Adding the css3 transitions makes these changes more gradual, and therefore easier on the eye. For this same reason, operating systems now tend to make use of a lot of animations. There’s a lot of neuroscience behind these concepts, but I’m not well versed in that. Basically, slight animations generally look better than instant changes. Some people will argue that things aren’t as “snappy” or seem slugish with transitions, but if that’s the case, it’s only a matter of adjusting the animation timing function and duration.
