CSS Animation初探

動畫在交互設計中是一個十分能加分的東西，用以平滑過度，會讓用戶體驗上幾個臺階。對于Web開發也是如此，恰當的使用動畫可以讓網頁使用起來更加的用戶友好。這里就來探討一下CSS中一些動畫的實現方式，初識前端，不足之處敬請指正。

使用transition來實現動畫

transition是CSS3中的屬性，它的作用就是讓CSS的屬性以平滑的漸變動畫方式來展現而非突然變化，因此可以用來實現一些簡單動畫。

語法：transition: property duration timing-function delay

像其他的CSS寫法一樣，這四個值也可以單獨指定：

• transition-property
• transition-duration
• transition-timing
• transition-delay
</ul>

transition的特點

• 每當有transtion所指定的屬性發生變化時，動畫就會被觸發，當然也受transition-delay的控制
• transition生效的前提是元素在DOM中，所以對于屬性display: none之類的是不會起作用的
</ul>

更多關于transition的使用請參考這篇文章，相當的詳細。

使用transform來實現動畫

transform是CSS3中新加的屬性，用以對元素進行2D或3D的變換，這里變換的意思是幾何變換，包括旋轉，縮放，移動和傾斜旋轉等。

• translate，translate3d, translateX, translateY, translateZ
• rotate, rotate3d, rotateX, rotateY, rotateZ
• scale, scale3d, scaleX, scaleY, scaleZ
• skew, skewX, skewY
</ul>

用這些來指定是進行什么變換，就像名字所指的，translate是進行2D移動，如translate(10, 11)，translate3d是進行3d移動, 如translate3d(1, 0, 10)，后面帶坐標軸就是在某一特定方向上移動，其他幾個類似。

需要注意幾點：

• transform只能定義幾何變換，不能進行其他的，比如顏色，背景，透明度等非幾何屬性

• 指定了transform會立即發生，所以要配合transition一起來使用 用transition來為transform指定時長，變化曲線以及delay的等關鍵的動畫參數，才能成為真正的動畫，否則transform也不會有動畫效果。如：

  transform: translate3d(10, 20, 30);
   transition: transform 300 ease-in;

  </li>

• translate移動的距離是相對于沒有transform時的位置 比如說某元素原來位置是100， 100, 那么translate(10, 10)，后的位置是110, 110，接著再translate(-10, -10)，后位置是90, 90.
• 還有就是對于translate最好使用translate3d，盡管可能只是一維的移動，translate3d要更平滑一些。
</ul>

使用key-frame來實現動畫

@keyframe規則是專門用來做動畫的，它可以指定具體到某一幀的狀態是什么樣子的，以整數百分比來指定幀數，再給定CSS屬性，就組成了一組狀態的變化。比如：

@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    50%  {top: 100px;}
    75%  {top: 200px;}
    100% {top: 0px;}
}




就是一個簡單的移動動畫。 具體的可以參考這篇文章，講述的還是很清楚的。

如何選擇

一般來說，如果是移動，旋轉或者縮放就使用transform就夠了。如果要變化顏色，或者背景色或者可見度，就使用transition就好了。如果是復雜的動畫，比如控制多個元素同時做動畫，或者動畫本身比較復雜還是使用@keyframes。

流行的動畫庫

這個文章列的很詳細，就不再單獨的列出來了。如果你知道有其他的庫也請與我分享。

一些不錯的資源和網站

• CSS3 Maker
• CSS tricks
• Can I Use
</ul>

參考

• An Introduction To CSS3 Keyframe Animations
</ul> </div> 來自：http://toughcoder.net/blog/2015/05/04/introduction-to-css-animation/
 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
 本文地址：http://www.baiduhome.net/lib/view/open1432779274769.html
CSS 前端技術

相關經驗

• CSS Animation初探
• CSS Animation性能優化
• css變換transform和動畫animation
• CSS3系列-css3之線性漸變初探
• Android動畫-Frame Animation

相關資訊

• .NET Core初探
• iOS 7.1 初探
• Apple WatchKit初探
• Windows 10 for Phone 初探
• 初探F# 4.0

相關文檔

•  COM 技術初探
•  iPhone異步編程初探
•  CSS,什么是CSS,學習CSS,CSS專題,CSS知識
•  Javascript、jquery、dwr初探
•  Javascript、jquery、dwr初探
•  第03章 初探Android應用程式專案
•  超詳細wordpress_主題教程：從零開始制作
•  Qt5 Cadaques中文完整版
•  Intellij IDEA教程