CSS3動(dòng)畫
CreateTime: 2016-09-07 11:14:32
Author： zhongxia
CSS3的動(dòng)畫效果是一個(gè)很有用的功能，可以很方便的實(shí)現(xiàn)了早期只能用JS來實(shí)現(xiàn)的動(dòng)畫效果。這里主要講解CSS3的動(dòng)畫
CSS3動(dòng)畫 transition 和 animation
一、transition （過度）
在沒有出現(xiàn)transition之前，CSS是沒有時(shí)間軸的籽懦，狀態(tài)變化是即時(shí)完成的。
最簡(jiǎn)單的使用方法
/*==================最基本用法=====================*/
img{
width:20px;
height:20px;
transition: 1s; /*設(shè)置CSS屬性變化過度的時(shí)間*/
}
img:hover{
width:200px;
height:200px;
}
/*==================完整例子=====================*/
img{
transition: 2s 1s height ease;
}
img{
transition-property: height; /*CSS狀態(tài)值需要過度的屬性*/
transition-duration: 2s; /*過度時(shí)間*/
transition-delay: 1s; /*延遲時(shí)間*/
transition-timing-function: ease;
/*狀態(tài)變化速度（ease 逐漸放慢、linear 勻速思喊、ease-in 加速、ease-out 減速次酌、cubic-bezier函數(shù)：自定義速度模式）*/
}
cubic-bezier 可以使用工具網(wǎng)站來實(shí)現(xiàn) 工具網(wǎng)站
transition的使用注意
各大瀏覽器（IE10+）支持不加前綴的 transition恨课。
不是所有的CSS屬性都只是 transition舆乔。 完整列表
transition需要明確知道，開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值剂公，才能計(jì)算出中間狀態(tài)希俩。比如，height從0px變化到100px纲辽，transition可以算出中間狀態(tài)颜武。但是，transition沒法算出0px到auto的中間狀態(tài)文兑，也就是說盒刚，如果開始或結(jié)束的設(shè)置是height: auto，那么就不會(huì)產(chǎn)生動(dòng)畫效果绿贞。類似的情況還有因块，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等籍铁。
transition的局限
transition的優(yōu)點(diǎn)在于簡(jiǎn)單易用涡上，但是它有幾個(gè)很大的局限。
transition需要事件觸發(fā)拒名，所以沒法在網(wǎng)頁加載時(shí)自動(dòng)發(fā)生吩愧。
transition是一次性的，不能重復(fù)發(fā)生增显，除非一再觸發(fā)雁佳。
transition只能定義開始狀態(tài)和結(jié)束狀態(tài)，不能定義中間狀態(tài)同云，也就是說只有兩個(gè)狀態(tài)糖权。
一條transition規(guī)則，只能定義一個(gè)屬性的變化炸站，不能涉及多個(gè)屬性星澳。
CSS Animation就是為了解決這些問題而提出的。
二旱易、animation （動(dòng)畫）
/*定義一個(gè)動(dòng)畫效果*/
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
div {
width: 200px;
height: 200px;
border: 1px solid black;
}
/*hover 使用這個(gè)動(dòng)畫效果*/
div:hover{
-webkit-animation: 1s rainbow;
animation: 1s rainbow; /*默認(rèn)播放一次*/
}
/*==================animation簡(jiǎn)寫======================*/
animation: 1s rainbow infinite; /*無限次播放*/
animation: 1s rainbow 10; /*播放10次*/
div:hover {
animation: 2s 1s rainbow linear 3 forwards normal;
}
div:hover {
animation-name: rainbow;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
animation-fill-mode: 動(dòng)畫結(jié)束以后禁偎，會(huì)立即從結(jié)束狀態(tài)跳回到起始狀態(tài)。如果想讓動(dòng)畫保持在結(jié)束狀態(tài)阀坏，需要使用animation-fill-mode屬性如暖。
- none：默認(rèn)值，回到動(dòng)畫沒開始時(shí)的狀態(tài)全释。
- backwards：讓動(dòng)畫回到第一幀的狀態(tài)装处。
- both: 根據(jù)animation-direction（見后）輪流應(yīng)用forwards和backwards規(guī)則。
animation-direction：動(dòng)畫循環(huán)播放后浸船，每次播放完都是回到開始的狀態(tài)妄迁，這個(gè)屬性可以修改
簡(jiǎn)單說，animation-direction指定了動(dòng)畫播放的方向李命，最常用的值是normal和reverse登淘。瀏覽器對(duì)其他值的支持情況不佳，應(yīng)該慎用封字。
keyframes
chrome 不支持沒有前綴的 @keyframes ,因此需要加上 @-webkit-keyframes, IE10+ 和 Firefox16+ 支持不加前綴的@keyframes
/*from=0% to=100%*/
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
/* 上面的 等于 下面這個(gè)寫法*/
@keyframes rainbow {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}
@keyframes pound {
from黔州，to { transform: none; }
50% { transform: scale(1.2); }
}
//另外一點(diǎn)需要注意的是，瀏覽器從一個(gè)狀態(tài)向另一個(gè)狀態(tài)過渡阔籽，是平滑過渡流妻。steps函數(shù)可以實(shí)現(xiàn)分步過渡。
div:hover {
animation: 1s rainbow infinite steps(10);
}
動(dòng)畫播放結(jié)束之后笆制，默認(rèn)回到初始狀態(tài)绅这，這個(gè)時(shí)候就需要使用到 animation-play-state
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
