前言介紹
- 這款 WordPress 外掛「CSS3 Transitions」是 2012-12-31 上架。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2017-11-11，距離現在已有 2730 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 3.0 以上版本才可以安裝。
- 有 4 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
ui | CSS3 | effects | eye candy | transitions |
內容簡介
此外掛可自動為你的網站/部落格及 WordPress 後台添加 CSS3 轉場效果。連結等等在正常及移上狀態之間將會獲得動畫效果。CSS3 轉場效果在大多數主要瀏覽器的最新版本中得到支持（Chrome、Internet Explorer 10、Firefox、Opera、Safari）；不支援的瀏覽器將繼續以之前的方式呈現所有內容。此外掛會添加轉場效果（動畫效果）至所有已定義移上或焦點狀態的 （連結）、（圖像）和 （表單字段及按鈕）標籤（例如，當滑鼠移上時，如果連結改變顏色）。其他「按鈕」、表單元素和 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.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「CSS3 Transitions」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0 | 1.1 | 1.2 | 1.3 | trunk |
延伸相關外掛（你可能也想知道）
暫無相關外掛推薦。