前言
主要內(nèi)容：CSS3 動(dòng)畫有那些屬性乃秀？動(dòng)畫怎么實(shí)現(xiàn)，幾種方法圆兵？javaScript 與它優(yōu)缺點(diǎn)跺讯？
目錄
- 2D 屬性
- 3D 屬性
- transition 動(dòng)畫
- keyframes
- 優(yōu)缺點(diǎn)總結(jié)
1. 2D 屬性
我用了 transition 與 hover 詮釋這幾個(gè) 2D 屬性，windth殉农、height 其它很多導(dǎo)致外觀變化的屬性幾乎都可以變成動(dòng)畫刀脏。
簡(jiǎn)書不能鑲嵌 iframe，就看不見動(dòng)畫效果了超凳， 你可以到我的博客看這篇文章 ：http://liangtongzhuo.com/atricle.html?5a46f1039f545400454bfc6e
<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/vjLbf9ys/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>
備注代碼
<div class="translate">transform: translate(5px,5px); 位移</div>
<div class="rotate">transform: rotate(30deg); 旋轉(zhuǎn)</div>
<div class="scale">transform: scale(2,4); 放大縮小</div>
<div class="skew">transform: skew(0deg,90deg); Y 傾斜角 30 度愈污，不常用</div>
<div class="matrix">transform:matrix(0.866,0.5,-0.5,0.866,0,0);矩陣 不常用，但很厲害轮傍。</div>
div {
background-color: #87CEFA;
margin-top:30px;
transition: 2s;
}
.translate:hover{
transform: translate(5px,5px);
}
.rotate:hover{
transform: rotate(30deg);
}
.scale:hover{
transform: scale(2,4);
}
.skew:hover{
transform: skew(0deg,30deg);
}
.matrix:hover{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
還有一個(gè) transform-origin 屬性暂雹，示例程序 http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html
2. 3D 屬性
3D 屬性幾個(gè)和上邊幾乎是相似的， 3D 還牽扯到透視問題以后再說（https://developer.mozilla.org/en-US/docs/Web/CSS/perspective）
<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/r7p31dfx/2/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>
代碼備注
<div class="rotateX">transform: rotateX(60deg); x 軸 3D 旋轉(zhuǎn)</div>
<div class="rotateY">transform: rotateY(60deg); y 軸 3D 旋轉(zhuǎn)</div>
div {
background-color: #87CEFA;
margin-top:30px;
transition: 2s;
}
.rotateX:hover{
transform: rotateX(60deg);
}
.rotateY:hover{
transform: rotateY(60deg);
}
3. transition 動(dòng)畫
<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/mph06yw2/3/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>
代碼備注
<div class="rotateX"></div>
div {
background-color: #87CEFA;
margin-top:30px;
width:50px;
height:50px;
transition: 1s 0.5s width linear;
}
.rotateX:hover{
width: 100px;
}
transition 動(dòng)畫時(shí)間1秒创夜，延遲0.5秒執(zhí)行 杭跪，只有 width 執(zhí)行動(dòng)畫， linear 勻速動(dòng)畫
（1）linear：勻速
（2）ease-in：加速
（3）ease-out：減速
（4）cubic-bezier函數(shù)：自定義速度模式
自定義速度 http://cubic-bezier.com/#.17,.67,.83,.67
4. keyframes
<iframe width="100%" height="300" src="http://jsfiddle.net/liangtongzhuo/vvdjnuvo/2/embedded/html,css,result/" allowpaymentreqeust allowfullscreen="allowfullscreen" frameborder="0"></iframe>
animation-name 規(guī)定 @keyframes 動(dòng)畫的名稱挥下。
animation-duration 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒揍魂。默認(rèn)是 0桨醋。
animation-timing-function 規(guī)定動(dòng)畫的速度曲線棚瘟。默認(rèn)是 "ease"。
animation-delay 規(guī)定動(dòng)畫何時(shí)開始喜最。默認(rèn)是 0偎蘸。
animation-iteration-count 規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1瞬内。
animation-direction 規(guī)定動(dòng)畫是否在下一周期逆向地播放迷雪。默認(rèn)是 "normal"。
animation-play-state 規(guī)定動(dòng)畫是否正在運(yùn)行或暫停虫蝶。默認(rèn)是 "running"章咧。
5. 優(yōu)缺點(diǎn)總結(jié)
優(yōu)點(diǎn)：CSS3 能很方便的做出動(dòng)畫， 并不需要修改 DOM 和書寫 JavaScript 非常便捷能真。尤其是配合 hover赁严，來寫鼠標(biāo)移動(dòng)的特效扰柠。
缺點(diǎn)：CSS3 對(duì)點(diǎn)擊事件獲取當(dāng)前動(dòng)畫執(zhí)行時(shí)間與效果是不清楚，不能根據(jù)當(dāng)前動(dòng)畫執(zhí)行狀態(tài)判斷邏輯疼约。
