博客已遷移到CSDN《https://blog.csdn.net/qq_33375499》
在開發中，一個好的用戶操作界面，總會夾雜着一些動畫。css用對少的代碼，來給用戶最佳的體驗感，下面我總結了一些css動畫屬性的使用方法及用例代碼供大家參考，在不對的地方，希望大佬直接拍磚評論。
1 transition(過渡)
使用語法:
transition: property duration timing-function delay;
參數：
(1) property(設置過渡效果的css屬性名稱)：none | all | property。none表示沒有屬性獲得過渡效果；all表示所有屬性都將獲得過渡效果；property表示css屬性列表，多個屬性用逗號( , )隔開。
(2) duration(設置完成過渡效果的時間)：秒或毫秒(s/ms)。
(3) 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)，在該函數定義自己的值，數值為0-1之間。
(4) delay(過渡效果何時開始)：值多少秒后執行過渡效果，如 2s ，表示2s后執行。
2 transform
transform屬性應用於2D 或 3D轉換。該屬性允許我們能夠對元素進行旋轉、縮放、傾斜、移動這四類操作。
使用語法：
transform: none|transform-functions;
參數：
(1) none：定義不進行任何轉換，一般用於注冊掉該轉換。
(2) transform-functions：定義要進行轉換的類型函數。主要有：
旋轉(rotate)：主要分為2D旋轉和3D旋轉。rotate(angle)，2D 旋轉，參數為角度，如45deg；rotate(x,y,z,angle)，3D旋轉，圍繞原地到(x,y,z)的直線進行3D旋轉；rotateX(angle)，沿着X軸進行3D旋轉；rotateY(angle)；rotateZ(angle)；
縮放(scale)：一般用於元素的大小收縮設定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。
傾斜(skew)：主要用於對元素的樣式傾斜。skew(x-angle, y-angle)，沿着x和y軸的2D傾斜轉換；skewX(angle)，沿着x軸的2D傾斜轉換；skew(angle)，沿着y軸的2D傾斜轉換。
移動(translate)：主要用於將元素移動。translate(x, y)，定義向x和y軸移動的像素點；translate(x, y, z)，定義像x、y、z軸移動的像素點；translateX(x)；translateY(y)；translateZ(z)。
3 animation
該屬性主要用於設置動畫屬性。
使用語法：
animation: name duration timing-function delay iteration-count direction;
參數：
(1) name：需要綁定到選擇器的keyframe名稱。
(2) duration：完成該動畫需要花費的時間，秒或毫秒。
(3) 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)，在該函數定義自己的值，數值為0-1之間。
(4) delay：設置動畫在開始之前的延遲。
(5) iteration-count：設置動畫執行的次數。
(6) direction：是否輪詢反向播放動畫。normal，默認值，動畫應該正常播放；alternate，動畫應該輪流反向播放。
下面展示了這些元素的測試代碼：
<!DOCTYPE html> <html> <head> <title>transition/transform</title> </head> <style type="text/css"> #div1 { float: left; height: 100px; width: 100px; background-color: red; } #div2 { float: left; height: 100px; width: 100px; background-color: green; } #div3 { float: left; height: 100px; width: 100px; background-color: blue; } #div4 { float: left; height: 100px; width: 100px; background-color: #234F21; } #div5 { float: left; height: 100px; width: 100px; background-color: #af123c; } #div6 { float: left; height: 100px; width: 100px; background-color: #affa3c; } /* transition 實現多個屬性 */ #div1:active { width:200px; height: 200px; transition: width 2s ease,height 2s ease; -moz-transition: width 2s ease,height 2s ease; /* Firefox 4 */ -webkit-transition: width 2s ease,height 2s ease; /* Safari 和 Chrome */ -o-transition: width 2s ease,height 2s ease; /* Opera */ } /* transform 旋轉 rotate */ #div2:hover { transform:rotate(35deg); -ms-transform:rotate(35deg); /* IE 9 */ -moz-transform:rotate(35deg); /* Firefox */ -webkit-transform:rotate(35deg); /* Safari 和 Chrome */ -o-transform:rotate(35deg); /* Opera */ } /* transform 縮放 scale */ #div3:hover { transform:scale(0.8, 1.5); -ms-transform:scale(0.8, 1.5); /* IE 9 */ -moz-transform:scale(0.8, 1.5); /* Firefox */ -webkit-transform:scale(0.8, 1.5); /* Safari 和 Chrome */ -o-transform:scale(0.8, 1.5); /* Opera */ } /* transform 傾斜 skew */ #div4:hover { transform:skew(35deg); -ms-transform:skew(35deg); /* IE 9 */ -moz-transform:skew(35deg); /* Firefox */ -webkit-transform:skew(35deg); /* Safari 和 Chrome */ -o-transform:skew(35deg); /* Opera */ } /* transform 移動 translate */ #div5:hover { transform:translate(45px, 45px); -ms-transform:translate(45px, 45px); /* IE 9 */ -moz-transform:translate(45px, 45px); /* Firefox */ -webkit-transform:translate(45px, 45px); /* Safari 和 Chrome */ -o-transform:translate(45px, 45px); /* Opera */ } /* transform 多個效果 */ #div6:hover { transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* IE 9 */ -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px)translate(45px, 45px); /* Safari 和 Chrome */ -o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* Opera */ } </style> <body> <div id="div1">transition</div> <div id="div2">transform rotate</div> <div id="div3">transform scale</div> <div id="div4">transform skew</div> <div id="div5">transform translate</div> <div id="div6">transform</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>transition/transform</title> </head> <style type="text/css"> /* animation */ .div7 { width:100px; height:100px; background:red; position:relative; animation:myfirst 5s infinite; animation-direction:alternate; /* Safari and Chrome */ -webkit-animation:myfirst 5s infinite; -webkit-animation-direction:alternate; } @keyframes myfirst{ 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst {/* Safari and Chrome */ 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
@-moz-keyframes myfirst {/* Firefox */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst {/* Opera */
0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}
}
</style> <body> <div class="div7">animation</div> </body> </html>