CSS3中Transition動畫屬性用法詳解

發(fā)布時間：2016-07-04 15:17:54 作者：佚名

這篇文章主要為大家詳細(xì)介紹了CSS3中Transition動畫屬性用法，教大家如何使用Transition動畫，感興趣的小伙伴們可以參考一下

W3C標(biāo)準(zhǔn)中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值。”

transition屬性的值包括以下四個：

•transition-property：指定對HTML元素的哪個css屬性進(jìn)行過渡漸變處理，這個屬性可以是color、width、height等各種標(biāo)準(zhǔn)的css屬性。
•transition-duration：指定屬性過渡的持續(xù)時間
•transition-timing-function：指定漸變的速度：
1、ease：（逐漸變慢）默認(rèn)值，ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)；
2、linear：（勻速），linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)；
3、ease-in：(加速)，ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)；
4、ease-out：（減速），ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0)；
5、ease-in-out：（加速然后減速），ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)；
6、cubic-bezier：（該值允許你去自定義一個時間曲線），特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無效。
•transition-delay：指定延遲時間，也就是經(jīng)過多長時間才開始執(zhí)行過渡過程。

瀏覽器兼容性

Internet Explorer 9 以及更早的版本，不支持 transition 屬性。

Internet Explorer 10, Firefox, Opera 和 Chrome支持transition 屬性。Chrome 25 以及更早的版本以及Safari 需要前綴 -webkit-。

下面還是以實(shí)例來說明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;
/*簡寫屬性*/
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
/*每個屬性分開寫*/
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上時，CSS屬性：width,height,transform,background,opacity都發(fā)生漸變過渡效果。最終css樣式變成.animated_div里定義的樣式，過渡過程大致如下：

再給一個網(wǎng)上的嫦娥奔月的示例，要求：當(dāng)鼠標(biāo)移到圖片上時，嫦娥出現(xiàn)，移開時嫦娥消失

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>