CSS樣式更改——過渡、動畫

###前言
上篇文章主要講述了CSS樣式更改中的2D轉換，這篇文章咱們來介紹下CSS樣式更改中的過渡、動畫基礎用法。

####1.過渡
元素從一種樣式逐漸改變爲另外一種的樣式

div
{
transition: width 1s;
-moz-transition: width 1s;  /* Firefox 4 */
-webkit-transition: width 1s;  /* Safari 和 Chrome */
-o-transition: width 1s;  /* Opera */
}
transition-property:應用過渡的Css屬性的名稱 好比寬度width
transition-duration:過渡效果花費的時間   好比1s
transition-timing-function:渡效果的時間曲線 以下所示：
linear 勻速
ease 先慢後快
ease-in 慢速開始
ease-out 慢速結束
ease-in-out 慢速開始和結束
cubic-bezier(n,n,n,n) 在cubic-bezie 函數中定義本身的值，可能的值是0至1之間的數值
transition-delay:過渡效果什麼時候開始 如1s

####2.動畫 Animation
1).首先定義@keyframes 規則

@keyframes my
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes my /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes my /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes my /* Opera */
{
from {background: red;}
to {background: yellow;}
}

爲了豐富元素的變化過程，你能夠把from to改成百分比的樣子：

@keyframes my
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes my /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes my /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes my /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
定義好了，接下來咱們就能夠啓動咱們的動畫了。

2).animation啓動動畫效果

div
{
animation-name: my;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: my;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: my;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: my;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

animation-name                   選擇器的 keyframes 的名稱
animation-duration               動畫所花費的時間
animation-timing-function        勻速播放動畫
animation-delay           動畫過多久開始
animation-iteration-count        播放動畫次數
animation-direction       是否在下一週期逆向地播放 normal 正常播放  alternate 輪流反向播放
animation-play-state             暫停動畫  paused 動畫已暫停  running 動畫正在播放
animation-fill-mode
none         不填充
forwards     當動畫完成後，保持最後一個屬性值
backwards     在animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值
both        向前和向後填充模式都被應用。

參考文檔：W3C官方文檔（CSS篇）

###總結
這篇文章主要介紹了CSS樣式更改篇中的過分和動漫基礎知識，但願讓你們對CSS樣式更改有個簡單的認識和了解。
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/