完整的學習和使用CSS動畫【譯】

sean 發(fā)布于2019-08-01 16:27 / 1876人閱讀

摘要：然而通過自定義貝塞爾曲線的值，可以滿足你具體的動畫時間需求。關于如何使用貝塞爾曲線的方法我們可以通過查看的開發(fā)者網(wǎng)站動畫延時動畫延時常常應用于當我們需要對動畫進行的延時操作的時候。從而減少大部分動畫執(zhí)行期間潛在的性能損耗問題。

注：原文有較大改動

使用 keyframes, animation屬性，例如timing, delay, play state, animation-count, iteration count, direction, fill mode以及will-change等等

創(chuàng)造動畫魔法

作為設計者、開發(fā)人員，除去精簡的用戶界面，更好的頁面加載速度外，我們發(fā)現(xiàn)通過給界面添加動畫效果，可以增加用戶與網(wǎng)站的互動率，能夠更好的吸引用戶使用我們的產(chǎn)品。CSS3 相對于原先的基于 JavaScript 操作 Dom 實現(xiàn)動畫的方式而已，CSS如今擁有更好的兼容性。所以本文就介紹CSS動畫的一些基本知識。

keyframes

通過逐漸改變對象的運動狀態(tài)的方式，我們可以將動畫應用到到頁面上的任何對象上。然而利用keyframes特性，我們便可以控制動畫對象每一階段的狀態(tài)。

 @keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50%{
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

我們嘗試思考以下這個例子:

動畫名（Animation name): pulse

3個步驟：0%（state time), 50%（x time）, 100% （end time）

CSS值：scale3d(x, y, z)

當動畫已經(jīng)在(@keyframes)中定義好后，我們可以控制以下幾樣東西：

動畫的持續(xù)時間

延遲多久動畫開始

動畫的重復頻率

動畫的方向

以下是實現(xiàn)示例：

button { 
   animation-duration: 1s; 
   animation-name: pulse; 
}

在以上示例中，我們給一個Button添加了動畫 pulse，定義了持續(xù)時長(duration)為1秒。如果我們調(diào)整了這個持續(xù)時長屬性的值，則可以看到這個Button就會出現(xiàn)一個還不錯的效果。如圖：

Demo地址：http://codepen.io/phyesix/pen/EZebOJ

1.動畫時間（Animation Timing)

動畫時間函數(shù)是用于決定我們希望動畫在移動周期內(nèi)要進行加速和減速效果的時間。所以，為了實現(xiàn)這個效果，我們需要定義動畫將要移動的速度。這里有一些我們常見的動畫時間屬性的選項值，例如：initial, inherit, ease, ease-in, ease-out, 還有linear等等。

引用：https://i.stack.imgur.com/

動畫時間函數(shù)：左（ease）右（linear）
以上的選項是很直接的調(diào)整動畫的方法。然而通過自定義貝塞爾曲線的值，可以滿足你具體的動畫時間需求。

關于如何使用貝塞爾曲線的方法我們可以通過查看Mozilla的開發(fā)者網(wǎng)站

2.動畫延時（Animation Delay）

動畫延時常常應用于當我們需要對動畫進行的延時操作的時候。即當某個動畫被觸發(fā)了，然后延時1S后開始執(zhí)行。例如：我們對“Send FeedBack"按鈕添加了延時處理：

動畫延時：左(1秒), 右(2秒)

3.動畫播放狀態(tài)（Animation Play State）

動畫播放狀態(tài)常常用來控制動畫是否需要暫停或者繼續(xù)。

運行（running)：動畫繼續(xù)

暫停（paused）: 動畫停止

Demo地址：http://codepen.io/phyesix/pen/apaYXr

4.動畫的循環(huán)次數(shù)

循環(huán)次數(shù)指單位時間內(nèi)，動畫所重復執(zhí)行的次數(shù)。

無限(infinite)：無限循環(huán)

指定值(x)：動畫重復x次

繼承(inherit)：繼承父級的循環(huán)次數(shù)

Demo地址：http://codepen.io/phyesix/pen/EZeELr

5.動畫方向（Animation Direction）

動畫方向是用于指定動畫對象的移動方向。例如是從尺寸0%到100%，還是從100%到%0，又或者是從0%到100%的大小，然后反轉從100%到0%。

順序的(Normal): 指動畫從0%到100%順序執(zhí)行

倒序(Reverse): 動畫從100%作為起點位置開始到0%倒序執(zhí)行

交替(Alernate): 動畫先從0%變化到100%，然后從100%返回到0%

反轉-交替(Alternate-reverse): 動畫從100%到0%倒序，然后又從0%前進到100%正序執(zhí)行

Demo地址：http://codepen.io/phyesix/pen/apaYXr

6.動畫填充模式（Animation Fill Mode）

我們需要知道，當動畫執(zhí)行結束后，在動畫執(zhí)行期間給對象元素所添加的樣式并不是永久的。這個樣式僅僅是在動畫期間被應用然后即被移除。關于動畫應用的模式，我們可以使用以下屬性值來表示：

向后（Backward）: 在動畫處于0%時，樣式會被應用到元素上

向前（Forward）: 在動畫處于100%時，樣式會被應用到元素上

兼得（Both): 在動畫開始和結束時樣式會被應用

初始值（Initial): 設置這個屬性為默認值

Demo地址：http://codepen.io/phyesix/pen/PWgqLj

7.將要改變（Will-Change）

非常感謝 Will-Change 特性。可以通過 Will-Change 屬性，我們可以在動畫執(zhí)行前，提前通知瀏覽器上我們將要執(zhí)行動畫的對象元素。這就允許了我們可以一次性的對元素的多個屬性進行動畫操作。從而減少大部分動畫執(zhí)行期間潛在的性能損耗問題。

button { 
   will-change: transform, opacity; 
}

下面的代碼我聲明了將會對所有元素的所有屬性執(zhí)行動畫，即使是非動畫區(qū)域。

*, *::before, *::after { 
    will-change: all 
}

很顯然，上面的這種使用方法會帶來一些沒有必要的系統(tǒng)資源的占用和性能損耗。
所以，我們應該盡可能在所需要的元素上使用CSS動畫。更多關于 Will-Change 的特性的信息請看：https://dev.opera.com/articles/css-will-change-property/

4個超級屬性

在keyframes里，我們幾乎可以使用任何的CSS屬性。在如今的大部分瀏覽器中，你可以放心的使用 position, scale, rotation, opacity 等等屬性值。并且這4個屬性可以給動畫效果帶來更高效，更好的性能表現(xiàn)。

引用：https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

結語

以上列舉的都是些實現(xiàn)CSS動畫的基本屬性，一旦了解了這些基礎，從而更方便的開始進行動畫創(chuàng)作。
關于很多你可能感興趣的CSS動畫應用和實例資源，可以查看Codepen的CSS動畫單元。

翻譯地址：http://imziv.com/blog/article...

原文鏈接：https://stories.jotform.com/h...

個人建了前端學習群，旨在一起學習前端。純凈、純粹技術討論，非前端人員勿擾！入群加我微信：iamaixiaoxiao。

GPU云服務器云服務器 css的使用數(shù)據(jù)庫的安全性和完整性 css3動畫 css和html的區(qū)別

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50533.html

完整的學習和使用CSS動畫【譯】

摘要：然而通過自定義貝塞爾曲線的值，可以滿足你具體的動畫時間需求。關于如何使用貝塞爾曲線的方法我們可以通過查看的開發(fā)者網(wǎng)站動畫延時動畫延時常常應用于當我們需要對動畫進行的延時操作的時候。從而減少大部分動畫執(zhí)行期間潛在的性能損耗問題。注：原文有較大改動使用 keyframes, animation屬性，例如timing, delay, play state, animation-coun...

fjcgreat 2019-08-30 15:53 評論0 收藏0
css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節(jié)前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現(xiàn)文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現(xiàn)了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0
[譯]10個驚人的CSS和JavaScript動畫logos例子

摘要：任天堂的最新游戲的控制臺帶有一個輝煌的動畫，他所有的商業(yè)廣告和這個示例都由創(chuàng)建。使用重新構建任天堂開關，同時使用動畫化整個事物。現(xiàn)在構建一個HTML和CSS的動畫logo比以前容易多了，配合更新的JavaScript庫可以進一步推動網(wǎng)絡動畫的發(fā)展。看看這個畫廊的10個令人難以置信的自定義動畫logo，它們展示的是一些未知的實體或者世界知名品牌。 1、Flowers SVG Web...

YFan 2019-08-30 15:53 評論0 收藏0
庫，組件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架構就是骨架，如下圖所示譯年月個有趣的和庫前端掘金我們創(chuàng)辦的使命是讓你及時的了解開發(fā)中最新最酷的趨勢。翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發(fā)工程師）本文原創(chuàng)，轉載請注明作者及出處。原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...

tommego 2019-08-20 16:33 評論0 收藏0