? ? 發現animation這個新屬性很有趣，在此學習，并整理下！

? ??瀏覽器支持：

? ? ? ?Internet Explorer 10、Firefox 以及 Opera 支持 animation 屬性；

? ? ? ?Safari 和 Chrome 支持替代的 -webkit-animation 屬性。

? ??定義和用法

? ? animation 屬性是一個簡寫屬性，用于設置六個動畫屬性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

? ???語法

animation: name duration timing-function delay iteration-count direction; 值描述

animation-name	規定需要綁定到選擇器的 keyframe 名稱。。 animation-name: keyframename|none;
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。 animation-duration: time;
animation-timing-function	規定動畫的速度曲線。 animation-timing-function: value;
animation-delay	規定在動畫開始之前的延遲。 animation-delay: time;
animation-iteration-count	規定動畫應該播放的次數。 animation-iteration-count: n|infinite（無限次）;
animation-direction	規定是否應該輪流反向播放動畫。 animation-direction: normal（正常）|alternate（輪流反向播放）;

?

?

?

?

?

?

?

?

?

?

?

?

?

?

其中

animation-timing-function 使用名為三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。您能夠在該函數中使用自己的值，也可以預定義的值：

值描述

linear	動畫從頭到尾的速度是相同的。
ease	默認。動畫以低速開始，然后加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

?

?

?

?

?

?

?

案例：

很實際的，一個箭頭循環上下跳動

#auto{

-webkit-animation:dd 1s infinite;
animation:dd 1s infinite;

}

@keyframes dd{
0% {transform:translate(0, 10px)}
50% {transform:translate(0, 0)}
100% {transform:translate(0, 10px)}
}
@-webkit-keyframes dd{
0% {-webkit-transform:translate(0, 10px)}
50% {-webkit-transform:translate(0, 0)}
100% {-webkit-transform:translate(0, 10px)}
}

?

注釋：animation?這個屬性的使用必須結合@keyframes一起使用

百分比的意思就是duration的百分比，如果沒有設置duration的話，則表示為無窮大。

transform:translate()：含義--變動，位移；也是CSS3里面的新屬性。

轉載于:https://www.cnblogs.com/Gwen-hui/p/4371915.html

總結

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

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