一、transition（過(guò)渡）

其作用是平滑的改變css的值宵凌，無(wú)論是點(diǎn)擊鞋囊、焦點(diǎn)、hover事件瞎惫，只要css的值改變了溜腐，就是平滑的，就是動(dòng)畫瓜喇；

1挺益、兼容性

• IE10 及以上支持；
• Safari 和 Chrome25 及以前的版本需要前綴 -webkit-乘寒；
• Firefox4 及以前版本需要前綴 -moz-望众；

2、寫法

• 要添加過(guò)渡的 css 屬性伞辛；
• 規(guī)定效果時(shí)長(zhǎng)烂翰；
• 若給多個(gè)屬性添加過(guò)渡效果，可用逗號(hào)隔開多個(gè)屬性蚤氏；

div {
  transition: width 2s;
  -moz-transition: width 2s;
  -webkit-transition: width 2s;
  width: 100px;
}
div:hover {
  width: 300px;
}

若無(wú)規(guī)定時(shí)長(zhǎng)甘耿，則沒(méi)有過(guò)渡效果，默認(rèn)為0竿滨；

3佳恬、過(guò)渡屬性

• transition：簡(jiǎn)寫，一次性設(shè)置多個(gè)過(guò)渡屬性于游；
• transition-property：規(guī)定應(yīng)用過(guò)渡的屬性名稱毁葱；
• transition-duration：定義過(guò)渡動(dòng)畫持續(xù)時(shí)間，默認(rèn) 0s贰剥；
• transition-delay：指定延遲過(guò)渡時(shí)間头谜，默認(rèn)是0s；
• transition-timing-function：定義過(guò)渡效果時(shí)間曲線鸠澈，默認(rèn) 'ease'柱告；
  • linear：勻速截驮；
    相當(dāng)于：cubic-bezier(0, 0, 1, 1) / cubic-bezier(1, 1, 0, 0)
  • ease：慢速開始，變快际度，慢速結(jié)束葵袭；
    相當(dāng)于：cubic-bezier(.25, .1, .25, 1)
  • ease-in：慢速開始，變快乖菱；
    相當(dāng)于：cubic-bezier(.42, 0, 1, 1)
  • ease-out：正常開始坡锡，慢速結(jié)束；
    相當(dāng)于：cubic-bezier(0, 0, .58, 1)
  • ease-in-out：規(guī)定以慢速開始和結(jié)束的過(guò)渡效果窒所；
    相當(dāng)于：cubic-bezier(.42, 0, .58, 1)
  • cubic-bezier(x1,y1,x2,y2)：自定義三次貝塞爾曲線鹉勒，x 值是 0-1 之間的數(shù)，y 值任意吵取；
    三次貝塞爾曲線默認(rèn) P0(0, 0) 和 P3(1, 1)禽额，中間的 P1 和 P2 拉扯則自定義；

二皮官、animation（動(dòng)畫）

1脯倒、兼容性

• IE10 及以上；
• Safari 和 Chrome 需要前綴 -webkit-捺氢；
• Firefox 需要前綴 -moz-藻丢；

2、@keyframes 規(guī)則

• 用于創(chuàng)建動(dòng)畫逐漸變化的規(guī)則摄乒；
• 可改變?nèi)我舛鄻邮接品矗我舛啻螖?shù)；
• 用百分比規(guī)定變化進(jìn)度馍佑，或者關(guān)鍵字「from」和「to」斋否；
  from=0%，to=100%挤茄；

3如叼、animation 動(dòng)畫屬性

寫法

• 在選擇器內(nèi)定義動(dòng)畫屬性冰木；
• 需定義綁定的 @keyframes 動(dòng)畫規(guī)則名稱穷劈；
• 需定義動(dòng)畫時(shí)長(zhǎng)，若無(wú)定義時(shí)長(zhǎng)則無(wú)動(dòng)畫效果踊沸，默認(rèn)值0歇终；
  屬性
• animation：簡(jiǎn)寫，規(guī)定除了 animation-play-state 之外的所有屬性逼龟；
• animation-name：規(guī)定 @keyframes 動(dòng)畫名稱评凝；
• animation-duration：規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的時(shí)間，默認(rèn) 0s腺律；
• animation-timing-function：規(guī)定動(dòng)畫的速度曲線奕短，默認(rèn)是 'ease'宜肉；
  規(guī)則和上面過(guò)渡的一樣；
• animation-delay：規(guī)定動(dòng)畫何時(shí)開始翎碑，默認(rèn) 0s谬返；
• animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)，默認(rèn)是 1日杈；
  • n：定義播放次數(shù)遣铝；
  • infinite：無(wú)限次播放；
• animation-direction：規(guī)定動(dòng)畫是否在下一周期逆向播放莉擒， 默認(rèn)是 'normal'酿炸；
  • normal：下一周期正常播放；
  • alternate：輪流反向播放涨冀；
• animation-play-state：規(guī)定動(dòng)畫是否正在運(yùn)行或暫停填硕，默認(rèn)是 'running'；
  • paused：規(guī)定動(dòng)畫已暫停蝇裤；
    -running：規(guī)定動(dòng)畫正在播放廷支；
• animation-fill-mode：規(guī)定動(dòng)畫時(shí)間之外的狀態(tài)；
  • none：不改變默認(rèn)行為栓辜；
  • forwards：當(dāng)動(dòng)畫完成之后保持最后一個(gè)屬性值恋拍；
  • backwards：在動(dòng)畫開始之前的時(shí)間應(yīng)用第一個(gè)屬性值；
  • both：forwards 和 backwards 都被應(yīng)用藕甩；

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

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

@-webkit-keyframes first        /* Safari & Chrome */
{
    0% { background: red; }
    25% { background: yellow; }
    50% { background: blue; }
    75% { background: green; }
    100% { background: black; }
}

.firstAn {
    animation: first 5s linear 1s 1 normal forwards;
    -moz-animation: first 5s linear 1s 1 normal forwards;
    -webkit-animation: first 5s linear 1s 1 normal forwards;
    
    &:hover {
        animation-play-state: paused;
        -moz-animation-play-state: paused;
        -webkit-animation-play-state: paused;
    }
}