當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css3中变形与动画（三）

發布時間：2023/12/10 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3中变形与动画（三）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

transform可以實現矩陣變換，transition實現屬性的平滑過渡，animation意思是動畫，動漫，這個屬性才和真正意義的一幀一幀的動畫相關。本文就介紹animation屬性。

animation屬性通過一些關鍵幀中元素屬性的改變來實現動畫效果。當然也可以控制動畫持續時間，動畫迭代次數等。

一、例子

在介紹transition時開篇有一個例子就是實現鼠標放上去，div寬度從100px緩慢增大到200px。

用transition實現方法如下

div:hover{width: 200px;transition:width 5s ease-in; }

用animation也能實現類似效果，如下：

鼠標懸停，動畫持續5s，在時間到一半時div的寬度要從100px達到150px,5s時div寬度達到200px，動畫結束。

但是transition和animation效果還是有差別的，鼠標hover上去，transition動畫執行完后width保持200px;animation動畫執行完后width回到100px。

當然這只是默認效果，這個動畫完成時的效果也是可以修改的。

修改上面代碼中animation為

animation: 5s enlarge forwards;

就可以讓動畫執行完后停在最后一幀。這個forwards是animation-fill-mode的值，后面會詳細講。

通過這個例子只是想說，可以理解為transition是animation的簡化版，animation可以做更多的控制，也更強大。下面正式開始介紹。

二、keyframes

keyframes意思是“關鍵幀”，在關鍵幀會改變元素屬性的計算值。

keyframes語法：

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}'; keyframes-blocks: [ keyframe-selectors block ]* ; keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

綜合寫法：

@keyframes IDENT {from {Properties:Properties value;}Percentage {Properties:Properties value;}to {Properties:Properties value;}}或者全部寫成百分比的形式：@keyframes IDENT {0% {Properties:Properties value;}Percentage {Properties:Properties value;}100% {Properties:Properties value;}}

可見keyframes寫法是這樣的：由"@keyframes"開頭，后面緊跟這個“動畫的名稱”加上一對花括號“{}”，括號中是一些不同時間段的樣式規則，規則寫法同css樣式。

一個“@keyframes”中的樣式規則是由多個百分比構成的，如"0%"到"100%"之間，可以在一個規則中創建多個百分比，分別在每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種不斷變化的效果，比如說移動、改變元素顏色、位置、大小、形狀等。

兩個關鍵字，"from"和"to"表示一個動畫從哪開始，到哪結束，也就是"from"相當于"0%"，而"to"相當于"100%"。

Note：0%中的%不能省略，省略則整個keyframes語法錯誤，整條規則無效，因為keyframes的單位只接受百分比值。

工作中有遇到壓縮工具yui compressor把css3中的0%壓縮成0導致動畫失效的情況。所以css如果壓縮盡量寫成from，to避免這種問題。【update:2016-08-02】

舉例：W3C官網的實例,下面介紹animation時會用到這段代碼。

@-webkit-keyframes 'wobble' {0% {margin-left: 100px;background: green;}40% {margin-left: 150px;background: orange;}60% {margin-left: 75px;background: blue;}100% {margin-left: 100px;background: red;}}

keyframes定義每一幀的動畫，但只寫keyframes是沒用的，需要調用才能生效。那怎樣調用就用到animation了。

三、animation

animation沒有事件觸發時，在頁面加載后顯式的隨著時間變化來改變元素css樣式，從而產生動畫效果。

元素是怎樣調用animation和keyframes的呢？

舉例：調用上面寫好的wobble動畫。

.demo1 {width: 50px;height: 50px;margin-left: 100px;background: blue;-webkit-animation-name:'wobble';/*動畫屬性名，也就是我們前面keyframes定義的動畫名*/-webkit-animation-duration: 10s;/*動畫持續時間*/-webkit-animation-timing-function: ease-in-out; /*動畫頻率，和transition-timing-function是一樣的*/-webkit-animation-delay: 2s;/*動畫延遲時間*/-webkit-animation-iteration-count: 10;/*定義循環次數，infinite為無限次*/-webkit-animation-direction: alternate;/*定義動畫方式*/}

到此，如果前面看過transition應該已經明白animation也是個復合屬性。

animation包含下面屬性： animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state和animation-fill-mode。下面一一介紹，重點理解加粗的屬性。

1、animation-name

animation-name是最關鍵的了，表示應用哪個幀動畫。

語法：

animation-name: none | IDENT[,none | IDENT]*;

默認值：none，即默認情況沒有動畫效果。

animation-name屬性調用@keyframes定義好的動畫，必須和"@keyframes"定義的動畫名稱完全一致（區分大小寫）。

舉例：animation配合矩陣變換中的平移做一個有意思的小動畫。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>變形與動畫</title> <style type="text/css"> @keyframes around{0% {transform: translateX(0);}25%{transform: translateX(180px);}50%{transform: translate(180px, 180px); }75%{transform:translate(0,180px);}100%{transform: translateY(0);} } div {width: 200px;height: 200px;border: 1px solid red;margin: 20px auto; } div span {display: inline-block;width: 20px;height: 20px;background: orange;border-radius: 100%;animation-name:around;animation-duration: 10s;animation-timing-function: ease;animation-delay: 1s;animation-iteration-count:infinite; } </style> </head> <body><div><span></span></div></body> </html> View Code

2、animation-duration

語法：

animation-duration: <time>[,<time>]*

默認值為0，意味著動畫時長0，即沒有動畫效果（如果值為負值被視為0）。

animation-duration定義播放動畫持續的時間，也就是完成從0%到100%一次動畫所需要的時間。單位s。

3、animation-timing-function

語法：

animation-timing-function屬性用來設置動畫播放方式。詳情可參考css3中變形與動畫（二）中的介紹。

4、animation-delay

語法：

animation-delay:<time>[,<time>]*

animation-delay定義事件觸發到動畫開始執行的時間，即延時。

5、animation-iteration-count

語法：

animation-iteration-count: infinite | <number> [, infinite | <number>]*

animation-iteration-count屬性用來定義動畫的播放次數。

默認值為1，即動畫從開始到結束只播放一次。

值為infinite，動畫將會無限次播放。

6、animation-direction

語法：

animation-direction:normal | alternate [, normal | alternate]*

animation-direction設置動畫播放方向。

屬性：

normal:默認值，如果值為normal時，動畫每次循環都是向前播放。

alternate：奇數次播放動畫是按順序播放各幀動畫，偶數次播放動畫是按逆序播放各幀動畫。

這個alternate還是很有用的，我寫了一個例子，可以感受一下alternate效果。

例子：div尺寸由小到大，然后由大到小。

7、animation-play-state

animation-play-state用來控制元素動畫的播放狀態。

參數：

running:running是其默認值，作用是類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放。

Note:

這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。

如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態。

paused:暫停播放。

這個很有用，讓動畫在鼠標懸停時暫停，離開時繼續播放。

例子：還是上面的例子，加下面代碼即可。

div:hover{animation-play-state:paused;}

8、animation-fill-mode

animation-fill-mode規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用的樣式。

有四個屬性值：

none：默認值，動畫執行前后不改變元素的任何樣式。就是說動畫在第一個關鍵幀播放之前不影響元素，最后一個關鍵幀播放完后停止影響元素。

forwards:動畫完成后呆在最后一幀，就是保持結束時的狀態。這里的最后一幀取決于animation-direction和animation-iteration-count：

backwards:在animation-delay期間應用第一幀。保持animation-delay，第一幀取法如下：

both:根據animation-direction輪流應用forwards和backwards規則。

Note:forwards和backwards關鍵字都是有s的。

backwards和none的區別

還是上面的例子，只是增加了animation-fill-mode屬性。

animation-fill-mode為none，則動畫開始延時期間div為藍色，backwards則動畫開始延時期間div為綠色。

四、綜合實例

【更新于2015/11/13】

舉一個工作中做的例子：

效果如下，“買完回來領會員”是一個按鈕，會左右晃動吸引用戶注意力。用戶hover上去點的時候動畫停住讓用戶可以點擊，不然點不到哈。

用到的圖片

代碼如下：

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>animation by starof</title> <style> body{margin:0;} .w4{height:200px;background-color:#ef9b14;position: relative; } /*絕對定位*/ .w4 .buy-icno{position:absolute;top:0;right:50%;margin-right:-472px;z-index:5; } /*infinite動畫一直重復*/ .w4 .buy-icno{-webkit-animation:transform 2.5s linear infinite forwards;-moz-animation:transform 2.5s linear infinite forwards;-ms-animation:transform 2.5s linear infinite forwards;animation:transform 2.5s linear infinite forwards; }.w4 .buy-icno:hover{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused; } /*4個時間段，0%到25%，從最低點到左上;25%到50%，從左上到最低點；50%到70%，從最低點到右上;70%到100%,從右上到最低點*/ @-webkit-keyframes transform { 0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} } @keyframes transform { 0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);} }</style> </head> <body><div class="w4"> <a href=""><img class="buy-icno" src="images/buy-icno1.png"></a> </div> </body> </html> View Code

原理：

動畫分為4個時間段，0%到25%，從最低點到左上;25%到50%，從左上到最低點；50%到70%，從最低點到右上;70%到100%,從右上到最低點。
然后設置動畫重復次數為infinite,即animation-iteration-count:infinite;一直重復。
鼠標hover上去設置animation-play-state:paused;動畫暫停。
設置動畫播放速度為線性animation-timing-function:linear，所以動畫一直是勻速的。
設置animation-fill-mode:forwards;動畫完成停在最后一幀，不過這個在本動畫中沒什么影響。

動畫具體內容用的是transform變形動畫，深入學習可參考css3中變形與動畫（一）。

設置transform-origin:top center;變形的基點默認是中心點，我們需要將其設置為上面這個"繩子"不動，也就是圖片的top center位置。
25%時到達左上;實現的時候就是順時針旋轉20度。同理75%是逆時針旋轉20度。
0%，50%，100%時都說旋轉0度，即不改變。

五、相關資源

看網上資料說做動畫，盡量使用絕對定位，從而避免重繪重排問題：

動畫十四原則:?http://www.sunnyzhen.com/course/animation_principles/demo.html

動畫十二原則：http://www.w3cplus.com/css3/animation-principles-for-the-web.html?utm_source=tuicool

傳說中動畫利器——css3 animation動畫庫，有很多基礎動畫

http://daneden.github.io/animate.css/

[github 地址：https://github.com/daneden/animate.css]

hover animation動畫

http://leaverou.github.io/animatable/

CSS3 Animation制作飄動的浮云和星星效果

css3 animation在線調節工具：

http://melonh.com/animationGenerator/? ?? 基于chrome的插件，可以快速調節頁面上的動畫

http://isux.tencent.com/css3/tools.html? ? ? 騰訊isux一款非常強大的動畫工具

http://tid.tenpay.com/labs/css3_keyframes_calculator.html? ? 財付通的幀動畫調節工具

參考資源鏈接：

css3 animation動畫技巧

跳動心臟

閃爍的星星

w3c css3-animations

MDN animation-fill-mode

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4585324.html有問題歡迎與我討論，共同進步。

總結

以上是生活随笔為你收集整理的css3中变形与动画（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

动画

上一篇： CTF-Web-[极客大挑战 2019]
下一篇：基于Spark的电影推荐系统（推荐系统~