CSS3

CSS過渡(transition)
經過 CSS3，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。
CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。通常狀況下與hover配合使用
要實現這一點，必須規定兩項內容：
一、規定您但願把效果添加到哪一個 CSS 屬性上
二、規定效果的時長
Transition的屬性
transition-property：none/all
transition-duration: 5s 完成過渡效果須要花費的時間，單位秒，默認爲0
transition-delay：過渡效果什麼時候開始，單位秒，默認爲0
語法規則：div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
結果：將鼠標放到黃色的 div 元素上，方塊會產生放大的效果。
CSS動畫（animation）
經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
CSS3動畫遵循 @keyframes 規則
經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：
一、規定動畫的名稱
二、規定動畫的時長
經常使用animation屬性
animation-name：規定 @keyframes 動畫的名稱
animation-duration：規定動畫完成一個週期所花費的秒或毫秒。默認是 0
animation-delay：規定動畫什麼時候開始。默認是 0
animation-timing-function：從開頭到結尾以相同的速度來播放動畫
animation-iteration-count：規定動畫被播放的次數。默認是 1
animation-play-state：規定動畫是否正在運行或暫停。默認是 "running"
語法規則：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
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:myfirst;
-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 and Chrome: */
-webkit-animation-name:myfirst;
-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:myfirst;
-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;
}

@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}