css animations 主要有兩塊構成，那么是哪兩塊呢？

keyframes : 定義了什么階段展示什么樣的動畫

?animation 屬性 ：把動畫掛載到一個具體的dom上，并且定義如何動起來；

keyframes

keyframes 是動畫的基礎，它定義了動畫在各個階段的時間線上應該如何呈現。每一個@keyframes 都應該包括下面：

?動畫的名字， 比如說， @ keyframes bounceIn

?動畫的各個階段，0% 是最開始的階段， 100%是最終的階段，中間可以添加多個中間狀態

?css的屬性，在動畫的各個階段，css的屬性分別是什么樣的

下面是一個簡單的 @keyframes :

@keyframes bounceIn {

0%{

transform: scale(0.1);

opacity:0;

}

60%{

transform：scale(1.2);

opacity:1

}

100%{

transform: scale(1);

opacity:1

}

}

（如果你還對 css 強大的 transform　屬性不熟悉的話，可以看我另外關于 transform 總結的教程， 強大的transform 配合 animation 簡直就是魔法般的效果）

animation 屬性

我們使用@keyframes 聲明好了一個動畫， 但是還不夠，我們要使用animation 屬性 animation 屬性做了兩件事情：

把動畫添加到了你想添加的那個元素

定義動畫是如何動起來的

所以，下面兩個屬性必須要添加到 dom 節點上： animation-name , animation-duration;

div {

animation-duration:2s;

animation-name: bounceIn;

}

為了更簡潔的語法，我們推薦使用 合寫 的寫法：

div {

animation: bouncIn 2s;

}

采用 合寫 的寫法，所有的動畫屬性，我們都要掛到animation 這個屬性下面：

animation:[animation-name][animation-duration][animation-timing-function]

[animation-delay][animation-iteration-count][animation-direction]

[animation-fill-mode][animation-play-state];

請記住：要讓動畫正常的動起來，要按照上面的順序來寫，并且前兩個屬性是一定要有的。 為了構建更復雜的動畫，需要再 將要運動的物體上 添加自定義屬性：

animation-timing-function

設置緩動：ease( 默認 ) | ease-in | ease-out ??

animation-delay

動畫延遲了多少時間： 0 s( 默認 )

animation-interaction-count?

動畫要循環多少次：#（默認是1） | infinite | initial?

Animation-direction

動畫要正著播，倒著播：normal( 默認?) | reverse | alternate | alternate - reverse ( 后面兩個的在animation-interaction-count>1的情況下起作用?)

animation-fill-mode?

none(默認) | forwards | backwards | both

animation-play-state

running | pause ?暫停后開始，是從之前位置無縫鏈接； （animation-play-state : ?不可以在animation 中簡寫，需要單獨的加在要運動的動畫身上) 你也可以在一個dom元素上增加多個 動畫，他們之間只需要用 逗號隔開：

.div {

animation: slideIn 2s, rotate 1.75s;

}

animation 和 transition 的效果是很像的； animation 是 定義一個動畫，然后掛載到要運動的物體身上； transition 是把transition 的屬性寫在要變化的物體身上，然后hover的時候改變樣式； transition可以當成是只有兩幀的animation; transition 和 transfrom 單詞長的是很像的； transfrom 作用是 2d 3d 的轉換， transfrom的主要方法有：

-webkit-transform : ?translate ( 10px , 20px ?) ? ? ? // 常用在絕對定位的水平居中，垂直居中；

-webkit-transform : rotate( 12deg )

-webkit-transform : scale ( 1,3 ?) ?寬度放大1倍，高度放大3倍

-webkit-transform : ?skew（30deg,60deg） 沿x軸旋轉的角度，沿y軸旋轉的角度

transform-origin : ?變換的基點

null

轉載于:https://www.cnblogs.com/dujuncheng/p/171275395c3b3792d1ed53c316e49036.html

總結

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

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