溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹如何在CSS3中使用Transition動(dòng)畫(huà)屬性，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
transition屬性的值包括以下四個(gè)：
•transition-property： 指定對(duì)HTML元素的哪個(gè)css屬性進(jìn)行過(guò)渡漸變處理，這個(gè)屬性可以是color、width、height等各種標(biāo)準(zhǔn)的css屬性。
•transition-duration：指定屬性過(guò)渡的持續(xù)時(shí)間
•transition-timing-function：指定漸變的速度：
1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(xiàn)(0.25, 0.1, 0.25, 1.0)；
2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(xiàn)(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(xiàn)(0.42, 0, 1.0, 1.0)；
4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(xiàn)(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(xiàn)(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（該值允許你去自定義一個(gè)時(shí)間曲線(xiàn)）， 特定的cubic-bezier曲線(xiàn)。 (x1, y1, x2, y2)四個(gè)值特定于曲線(xiàn)上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。
•transition-delay：指定延遲時(shí)間，也就是經(jīng)過(guò)多長(zhǎng)時(shí)間才開(kāi)始執(zhí)行過(guò)渡過(guò)程。
瀏覽器兼容性
Internet Explorer 9 以及更早的版本，不支持 transition 屬性。
Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 屬性。Chrome 25 以及更早的版本以及Safari 需要前綴 -webkit-。
下面還是以實(shí)例來(lái)說(shuō)明transition的用法
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition演示1</title>
<style type="text/css">
.animated_div {
margin: 100px auto;
width:100px;
height:60px;
background:#92B901;
/*簡(jiǎn)寫(xiě)屬性*/
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
/*每個(gè)屬性分開(kāi)寫(xiě)*/
transition-property:width,height,transform,background,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
-webkit-border-radius:5px;
border-radius:5px;
opacity:0.4;
}
.animated_div:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
opacity:1;
background:#1ec7e6;
width:200px;
height:120px;
}
</style>
</head>
<body>
<div class="animated_div"></div>
</body>
</html>上述代碼當(dāng)鼠標(biāo)移到div上時(shí)，CSS屬性：width,height,transform,background,opacity都發(fā)生漸變過(guò)渡效果。最終css樣式變成.animated_div里定義的樣式，過(guò)渡過(guò)程大致如下：
再給一個(gè)網(wǎng)上的嫦娥奔月的示例，要求：當(dāng)鼠標(biāo)移到圖片上時(shí)，嫦娥出現(xiàn)，移開(kāi)時(shí)嫦娥消失
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition演示2</title>
<style type="text/css">
body{
color: #fff;
background:#000;
}
.change{
display:block;
width:400px;
height:400px;
background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;
background-size:cover;
border:1em solid rgba(255,255,255,.8);
margin:50px auto;
}
.change img{
display:block;
width:300px;
height:284px;
opacity:0;
-webkit-transform:translate(-100px,-100px);
transform:translate(-100px,-100px);
-webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
}
.change:hover img{
-webkit-transform:translate(0px,0px);
transform:translate(0px,0px);
opacity:1;
}
</style>
</head>
<body>
<a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank">
<img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
</a>
</body>
</html>為了使嫦娥有飄入飄出的效果，設(shè)置了transform屬性，配合opacity屬性，加入過(guò)渡效果就能達(dá)到效果：
關(guān)于如何在CSS3中使用Transition動(dòng)畫(huà)屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼