CSS3中的動畫功能之筆記

1.transitions配置功能是使一個屬性值動畫渡過到另一個屬性值；

transitions:property(平滑過渡的屬性值)  duration(平滑過渡的時間值)  timing-function(平滑過渡的動畫效果/方法)

以上配置可以分開寫：

-webkit-transition-property:background-color;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

也可以多個屬性配置：

-webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;

2.animations配置則支持多個屬性值（關鍵幀）來變化動畫效果。

@-webkit-keyframes 關鍵幀集合名{創建關鍵幀代碼}

@-webkit-keyframes mycolor{

0%{color:red;}

50%{color:yellow;}

100%{color:green;}

}

開始幀:0%；結束幀：100%；設置值可在0%~100%；

然後使用該關鍵幀：

div{

-webkit-animation-name:mycolor;關鍵幀集合名

-webkit-animation-duration:5s;動畫時間

-webkit-animation-timing-function:linear;平滑過渡效果

}

timing-function可以設置:linear/ease-in/ease-out/ease/ease-in-out