css動(dòng)畫屬性使用及實(shí)例代碼(transition/transform/animation)
我要評(píng)論在開發(fā)中，一個(gè)好的用戶操作界面，總會(huì)夾雜著一些動(dòng)畫。css用對(duì)少的代碼，來給用戶最佳的體驗(yàn)感，下面我總結(jié)了一些css動(dòng)畫屬性的使用方法及用例代碼供大家參考，在不對(duì)的地方，希望大佬直接拍磚評(píng)論。
1 transition(過渡)
使用語法:
transition: property duration timing-function delay;
參數(shù)：
(1) property(設(shè)置過渡效果的css屬性名稱)：none | all | property。none表示沒有屬性獲得過渡效果；all表示所有屬性都將獲得過渡效果；property表示css屬性列表，多個(gè)屬性用逗號(hào)( , )隔開。
(2) duration(設(shè)置完成過渡效果的時(shí)間)：秒或毫秒(s/ms)。
(3) timing-function(設(shè)置效果速度的速度曲線)：linear，規(guī)定以相同速度開始到結(jié)束，等價(jià)于cubic-bezier(0,0,1,1)；ease，慢速開始，然后慢速結(jié)束，等價(jià)于cubic-bezier(0.25,0.1,0.25,1)；ease-in，以慢速開始，等價(jià)于cubic-bezier(0.42,0,1,1)；ease-out，以慢速結(jié)束，等價(jià)于cubic-bezier(0,0,0.58,1)；ease-in-out，以慢速開始和結(jié)束，等價(jià)于cubic-bezier(0.42,0,0.58,1)；cubic-bezier(n,n,n,n)，在該函數(shù)定義自己的值，數(shù)值為0-1之間。
(4) delay(過渡效果何時(shí)開始)：值多少秒后執(zhí)行過渡效果，如 2s ，表示2s后執(zhí)行。
2 transform
transform屬性應(yīng)用于2D 或 3D轉(zhuǎn)換。該屬性允許我們能夠?qū)υ剡M(jìn)行旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這四類操作。
使用語法：
transform: none|transform-functions;
參數(shù)：
(1) none：定義不進(jìn)行任何轉(zhuǎn)換，一般用于注冊掉該轉(zhuǎn)換。
(2) transform-functions：定義要進(jìn)行轉(zhuǎn)換的類型函數(shù)。主要有：
旋轉(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)；
縮放(scale)：一般用于元素的大小收縮設(shè)定。主要類型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z為收縮比例。
傾斜(skew)：主要用于對(duì)元素的樣式傾斜。skew(x-angle, y-angle)，沿著x和y軸的2D傾斜轉(zhuǎn)換；skewX(angle)，沿著x軸的2D傾斜轉(zhuǎn)換；skew(angle)，沿著y軸的2D傾斜轉(zhuǎn)換。
移動(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)。
3 animation
該屬性主要用于設(shè)置動(dòng)畫屬性。
使用語法：
animation: name duration timing-function delay iteration-count direction;
參數(shù)：
(1) name：需要綁定到選擇器的keyframe名稱。
(2) duration：完成該動(dòng)畫需要花費(fèi)的時(shí)間，秒或毫秒。
(3) timing-function：動(dòng)畫的運(yùn)動(dòng)速度曲線。linear，規(guī)定以相同速度開始到結(jié)束，等價(jià)于cubic-bezier(0,0,1,1)；ease，慢速開始，然后慢速結(jié)束，等價(jià)于cubic-bezier(0.25,0.1,0.25,1)；ease-in，以慢速開始，等價(jià)于cubic-bezier(0.42,0,1,1)；ease-out，以慢速結(jié)束，等價(jià)于cubic-bezier(0,0,0.58,1)；ease-in-out，以慢速開始和結(jié)束，等價(jià)于cubic-bezier(0.42,0,0.58,1)；cubic-bezier(n,n,n,n)，在該函數(shù)定義自己的值，數(shù)值為0-1之間。
(4) delay：設(shè)置動(dòng)畫在開始之前的延遲。
(5) iteration-count：設(shè)置動(dòng)畫執(zhí)行的次數(shù)。
(6) direction：是否輪詢反向播放動(dòng)畫。normal，默認(rèn)值，動(dòng)畫應(yīng)該正常播放；alternate，動(dòng)畫應(yīng)該輪流反向播放。
下面展示了這些元素的測試代碼：
<!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 實(shí)現(xiàn)多個(gè)屬性 */
#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 旋轉(zhuǎn) 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 移動(dòng) 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 多個(gè)效果 */
#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>
總結(jié)
以上所述是小編給大家介紹的css動(dòng)畫屬性使用及實(shí)例代碼(transition/transform/animation) ，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
基于CSS3的animation屬性實(shí)現(xiàn)微信拍一拍動(dòng)畫效果
這篇文章主要介紹了基于CSS3的animation屬性實(shí)現(xiàn)微信拍一拍動(dòng)畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-06-22
CSS3動(dòng)畫之利用requestAnimationFrame觸發(fā)重新播放功能
這篇文章主要介紹了利用requestAnimationFrame重新播放(觸發(fā))CSS3動(dòng)畫,代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-11CSS3中動(dòng)畫屬性transform、transition和animation屬性的區(qū)別
最近在項(xiàng)目中用到了CSS3中的動(dòng)畫屬性。無奈對(duì)于css3幾個(gè)新加的屬性不太熟悉，常常容易搞混。所以從網(wǎng)站研究了點(diǎn)資料，總結(jié)一下，方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25css動(dòng)畫效果之a(chǎn)nimation的常用樣式
這篇文章主要介紹了css動(dòng)畫效果之a(chǎn)nimation的常用樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-08-11
