過渡：就相當(dāng)于在點擊或者滑動等等動作時梳星，css進(jìn)行樣式改變的動畫汗侵。一個元素盒卸，它的屬性從一個值變化到另一個值饿序。
transition過渡
transition-property屬性
檢索或者設(shè)置對象中的參與過渡的屬性
transition-property: none | all | property;
transition-property:沒有屬性改變 |所有屬性改變（默認(rèn)）| 元素屬性名;
transition-duration
檢索或設(shè)置對象過渡的持續(xù)時間（開始后執(zhí)行的時間）
transition-duration: time;
time:規(guī)定完成過渡效果需要花費的時間（以秒或毫秒計）
ps:transition-duration: 2s;
transition-timing-function
檢索或設(shè)置對象中過渡的動畫類型
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>);
參數(shù)解釋：
linear：線性過渡赔癌。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡卧惜。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快攀痊。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢岸霹。等同于貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢躁锁。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
step-start：等同于steps(1, start)
step-end：等同于steps(1, end)
steps(<integer>[, [ start | end ] ]?)：接受兩個參數(shù)的步進(jìn)函數(shù)第一個參數(shù)：必須為正整數(shù)纷铣，指定函數(shù)的步數(shù)第二個參數(shù)：取值可是start或end，指定每一步的值發(fā)生變化的時間點第二個參數(shù)：可選战转，默認(rèn)值為end
transition-delay
檢索或設(shè)置對象延遲過渡的時間（開始前等待的時間）
transition-delay: time;
time:指定秒或毫秒數(shù)之前要等待切換效果開始,默認(rèn)值0搜立；
transition屬性
復(fù)合屬性，檢索或設(shè)置對象變換時的過渡
transition: property duration timing-function delay;
順序不可替換槐秧。
一個小例子：
做一個鼠標(biāo)滑過塊時啄踊，然后塊順時針旋轉(zhuǎn)360°，變?yōu)樽陨淼膬杀?/p>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
height: 50px;
width: 100px;
margin: 0 auto;
background: yellow;
transition: 2s;
}
div:hover{
transform: rotate(180deg);
width: 200px;
height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
動畫
利用到了人類視覺暫留的原理
animation
animation-name屬性
檢索或設(shè)置對象所應(yīng)用的動畫名稱
animation-name: keyframename| none;
keyframename：指定要綁定到選擇器的關(guān)鍵幀的名稱刁标；
none：指定有沒有動畫（可用于覆蓋從級聯(lián)的動畫）颠通。
animation-duration屬性
檢索或設(shè)置對象動畫的持續(xù)時間
animation-duration: time;
time是動畫執(zhí)行的時間
animation-timing-function屬性
檢索或設(shè)置對象動畫的過渡類型
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>);
linear：線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
ease：平滑過渡膀懈。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快顿锰。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢吏砂。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
step-start：等同于steps(1, start)step-end：等同于steps(1, end)
steps(<integer>[, [ start | end ] ]?)：接受兩個參數(shù)的步進(jìn)函數(shù)撵儿。第一個參數(shù)必須為正整數(shù)，指定函數(shù)的步數(shù)狐血。第二個參數(shù)取值可以是start或end淀歇，指定每一步的值發(fā)生變化的時間點。第二個參數(shù)是可選的匈织，默認(rèn)值為end浪默。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個數(shù)值需在[0, 1]區(qū)間內(nèi)
animation-delay屬性
檢索或設(shè)置對象動畫的延遲時間缀匕。
animation-delay: time;
可選纳决。定義動畫開始前等待的時間，以秒或毫秒計乡小。默認(rèn)值為0阔加。
animation-iteration-count屬性
檢索或設(shè)置對象動畫的循環(huán)次數(shù)。
animation-iteration-count: infinite | <number>;
<number>為數(shù)字满钟，其默認(rèn)值為“1”胜榔；infinite為無限次數(shù)循環(huán)胳喷。
例子：做一個轉(zhuǎn)圈圈的八卦陣
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Datalist</title>
</head>
<style type="text/css">
div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 400px;
width: 400px;
margin: auto;
border-radius: 50%;
border: 1px red solid;
box-sizing: border-box;
border-bottom: 200px red solid;
animation: rotate 5s linear infinite;
}
@keyframes rotate{
from {transform:rotate(0deg)}
to {transform:rotate(360deg);}
}
div:before{
content:'';
display:block;
position:absolute;
width:200px;
height:200px;
border-radius:50%;
left:0;
top:50%;
background-color:red;
background-image:radial-gradient(#fff 10%,red 10%);
}
div:after{
content:'';
display:block;
position:absolute;
width:200px;
height:200px;
border-radius:50%;
right: 0;
top:50%;
background-color:red;
background-image:radial-gradient(red 10%,#fff 10%);
}
</style>
<body>
<div>
</div>
</body>
</html>
animation-direction屬性
檢索或設(shè)置對象動畫在循環(huán)中是否反向運動。
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
normal：正常方向夭织；
reverse：反方向運行吭露；
alternate：動畫先正常運行再反方向運行，并持續(xù)交替運行尊惰；（依賴于循環(huán)）
alternate-reverse：動畫先反運行再正方向運行讲竿，并持續(xù)交替運行。（依賴于循環(huán)）
animation-fill-mode屬性
規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成或當(dāng)動畫有延遲未開始播放時）弄屡，要應(yīng)用到元素的樣式题禀。
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
none：默認(rèn)值。不設(shè)置對象動畫之外的狀態(tài)琢岩；
forwards：設(shè)置對象狀態(tài)為動畫結(jié)束時的狀態(tài)投剥；
backwards：設(shè)置對象狀態(tài)為動畫開始時的狀態(tài)；
both：設(shè)置對象狀態(tài)為動畫結(jié)束或開始的狀態(tài)担孔。
animation-play-state屬性
指定動畫是否正在運行或已暫停江锨。
animation-play-state: paused | running;
paused：指定暫停動畫；
running：默認(rèn)值糕篇，指定正在運行的動畫啄育。
復(fù)合屬性
animation屬性復(fù)合屬性。
檢索或設(shè)置對象所應(yīng)用的動畫特效拌消。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
需注意：如果只有一個數(shù)字時挑豌，這個數(shù)字不管位置在哪里，它都代表周期時間墩崩；如果有兩個數(shù)字氓英，那么前面的數(shù)字時周期時間，后邊的數(shù)字是延時鹦筹；
name和duration是必不可少的
@keyframes
關(guān)鍵幀铝阐，可以指定任何順序排列來決定Animation動畫變化的關(guān)鍵位置。
@keyframes animationname{
keyframes-selector
{
css-styles;
}
}
animationname：必寫項铐拐，定義animation的名稱徘键。
keyframes-selector：必寫項，動畫持續(xù)時間的百分比遍蟋，0-100%吹害、from (0%)、to (100%)
css-styles：必寫項虚青，一個或多個合法的CSS樣式 屬性
will-change
提前通知瀏覽器元素將要做什么動畫它呀，讓瀏覽器提前準(zhǔn)備合適的優(yōu)化設(shè)置。增強(qiáng)頁面渲染性能.
will-change: auto|scroll-position|contents|<custom-ident>|<animateable-feature>;
auto：此關(guān)鍵字表示沒有特定的意圖，適用于它通常所做的任何啟發(fā)式和優(yōu)化钟些。
scroll-position：表示將要改變元素的滾動位置烟号。
contents：表示將要改變元素的內(nèi)容。
<custom-ident>：明確指定將要改變的屬性與給定的名稱政恍。<animateable-feature>：可動畫的一些特征值，比如left达传、top篙耗、margin等。
