小編給大家分享一下css3動(dòng)畫類型有幾種，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供做網(wǎng)站、網(wǎng)站建設(shè)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。
css3動(dòng)畫類型有3種：1、使用transition屬性實(shí)現(xiàn)的漸變動(dòng)畫；2、使用transform屬性實(shí)現(xiàn)的轉(zhuǎn)變動(dòng)畫；3、使用animation屬性和“@keyframes”規(guī)則實(shí)現(xiàn)的自定義動(dòng)畫。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css實(shí)現(xiàn)動(dòng)畫主要有3種方式，第一種是：transition實(shí)現(xiàn)漸變動(dòng)畫，第二種是：transform轉(zhuǎn)變動(dòng)畫，第三種是：animation實(shí)現(xiàn)自定義動(dòng)畫，下面具體講一下3種動(dòng)畫的實(shí)現(xiàn)方式。
我們先看一下transition的屬性：
property:填寫需要變化的css屬性如：width,line-height,font-size,color等,所有作用與dom樣式的屬性;
duration:完成過渡效果需要的時(shí)間單位(s或者ms)
timing-function:完成效果的速度曲線（linear,ease,ease-in,ease-out等等）
timing-function具體的值可以看下面的表格：
| 值 | 描述 |
|---|---|
| linear | 勻速（等于 cubic-bezier(0,0,1,1)） |
| ease | 從慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in | 慢慢變快（等于 cubic-bezier(0.42,0,1,1)） |
| ease-out | 慢慢變慢（等于 cubic-bezier(0,0,0.58,1)） |
| ease-in-out | 先變快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），漸顯漸隱效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函數(shù)中定義自己的值。可能的值是 0 至 1 之間的數(shù)值 |
| delay: 動(dòng)畫效果的延遲觸發(fā)時(shí)間(單位ms或者s) |
下面我們看一個(gè)完整的例子：
重慶分公司
重慶分公司
.base {
width: 100px;
height: 100px;
display: inline-block;
background-color: #0EA9FF;
border-width: 5px;
border-style: solid;
border-color: #5daf34;
transition-property: width,height,background-color,border-width;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 500ms;
/*簡(jiǎn)寫*/
/*transition: all 2s ease-in 500ms;*/
&:hover {
width: 200px;
height: 200px;
background-color: #5daf34;
border-width: 10px;
border-color: #3a8ee6;
}
}運(yùn)行效果：
可以看到，鼠標(biāo)移上去的時(shí)候，動(dòng)畫延遲0.5s開始，并且由于
border-color沒有設(shè)置到transition-property里面，所以是沒有漸變動(dòng)畫的。
transform屬性應(yīng)用于2D 或 3D轉(zhuǎn)換。該屬性允許我們能夠?qū)υ剡M(jìn)行旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四類操作.一般是配合transition的屬性一起使用。
none：定義不進(jìn)行任何轉(zhuǎn)換，一般用于注冊(cè)掉該轉(zhuǎn)換。
transform-functions：定義要進(jìn)行轉(zhuǎn)換的類型函數(shù)。主要有：
1、旋轉(zhuǎn)(rotate)：主要分為2D旋轉(zhuǎn)和3D旋轉(zhuǎn)。rotate(angle)，2D 旋轉(zhuǎn)，參數(shù)為角度，如45deg；rotate(x,y,z,angle)，3D旋轉(zhuǎn)，圍繞原地到(x,y,z)的直線進(jìn)行3D旋轉(zhuǎn)；rotateX(angle)，沿著X軸進(jìn)行3D旋轉(zhuǎn)；rotateY(angle)；rotateZ(angle)；
2、縮放(scale)：一般用于元素的大小收縮設(shè)定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。
3、 傾斜(skew)：主要用于對(duì)元素的樣式傾斜。skew(x-angle, y-angle)，沿著x和y軸的2D傾斜轉(zhuǎn)換；skewX(angle)，沿著x軸的2D傾斜轉(zhuǎn)換；skew(angle)，沿著y軸的2D傾斜轉(zhuǎn)換。
4、移動(dòng)(translate)：主要用于將元素移動(dòng)。translate(x, y)，定義向x和y軸移動(dòng)的像素點(diǎn)；translate(x, y, z)，定義像x、y、z軸移動(dòng)的像素點(diǎn)；translateX(x)；translateY(y)；translateZ(z)。
transition配合transform一起使用
.base2{
transform:none;
transition-property: transform;
&:hover {
transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
}
}運(yùn)行效果：
可以看到盒子發(fā)生了旋轉(zhuǎn)，傾斜，平移，放大。
為了實(shí)現(xiàn)更靈活的動(dòng)畫效果，css3還提供了自定義動(dòng)畫的功能。
(1) name：需要綁定到選擇器的keyframe名稱。
(2) duration：完成該動(dòng)畫需要花費(fèi)的時(shí)間，秒或毫秒。
(3) timing-function：跟transition-linear一樣。
(4) delay：設(shè)置動(dòng)畫在開始之前的延遲。
(5) iteration-count：設(shè)置動(dòng)畫執(zhí)行的次數(shù)，infinite為無限次循環(huán)。
(6) direction：是否輪詢反向播放動(dòng)畫。normal，默認(rèn)值，動(dòng)畫應(yīng)該正常播放；alternate，動(dòng)畫應(yīng)該輪流反向播放。
