CSS3中的變換屬性：transform
CSS3中的漸變效果：transition
7.1 CSS3的變換類型
注：transform的兼容性如下
- IE10、Firefox、Opera支持transform屬性；
- IE9支持替代的-ms-transform屬性，僅適用于2D轉(zhuǎn)換；
- Safari和Chrome支持替代的-webkit-transform屬性；
- Opera只支持2D轉(zhuǎn)換；
7.1.1 rotate旋轉(zhuǎn)變換
- 最簡單的2D旋轉(zhuǎn)
div{
transfrom: rotate(7deg);
-ms-transform: rotate(7deg); /*IE9*/
-moz-transform: rotate(7deg); /*Firefox*/
-webkit-transform: rotate(7deg);/*safari和Chrome*/
-o-transform: rotate(7deg); /*Opera*/
}
rotateX, rotateY, rotateZ: rotateZ相當(dāng)于rotate
如果要在其他向量上旋轉(zhuǎn)，可以使用rotate3d(x, y, z, deg)，xyz的值建立三維向量，deg則是旋轉(zhuǎn)角度。
7.1.2 skew扭曲變換
div{
transform: skew(20deg, 10deg); /*在X軸方向偏轉(zhuǎn)20°，Y軸方向偏轉(zhuǎn)10°*/
}
注意：skew沒有3D和skewZ選項(xiàng)
7.1.3 scale比例縮放
div{
transform: scale(1.1, 1.1);
}
注：可以使用scaleX, scaleY, scaleZ進(jìn)行單一方向上的縮放。
7.1.4 translate位移變換
div{
transform: translate(100px, 20px); /*在x方向移動100px，Y方向移動20px*/
}
注：可以使用translateX, translateY, translateZ進(jìn)行單一方向上的位移。
7.2 使用transition制作交互動畫
用jquery實(shí)現(xiàn)動畫效果：
$(element).animate({width: "200px"}, 3000);
//$().animate(params, time, callback)
CSS3中的transition屬性可以平滑改變CSS屬性值
.content{
height: 100px;
width: 100px;
-webkit-transition: height 600ms;
-moz-transition: height 600ms;
-o-transition: height 600ms;
transition: height 600ms;
}
.content:hover{
height: 300px;
}
上例即為高度為100px的正方形在hover下0.6s內(nèi)變?yōu)?00px的動畫。如果需要改變多個屬性，可以使用逗號隔開：
.content{
transition: height 2s, width 2s, background 2s;
}
transition還可以包含設(shè)置漸進(jìn)動畫的函數(shù)，可以選擇的函數(shù)有6種。
- ease: 勻速變慢
- linear: 勻速
- ease-in: 加速
- ease-out: 減速
- ease-in-out: 加速然后減速
- cubic-bezier: 自定義時間曲線
transition: all 0.5s ease-in-out 1s;
四個參數(shù)依次表示：屬性、過渡時間、過渡函數(shù)、延遲時間
7.3 使用@keyframes制作動畫(關(guān)鍵幀)
7.3.1 @keyframes的基本語法
@keyframes spin{
from{
-webkit-transform: rotateY(0);
}
to{
-webkiy-transform: rotateY(-360deg);
} /*from和to代表0%和100%*/
}
@keyframes spin{
0% {
-webkit-transform: rotateY(0);
}
50% {
-webkit-transform: rotateY(-180deg);
}
100% {
-webkit-transfor,: rotateY(-360deg);
}
}
@keyframes必須配合元素中定義的animation屬性，用于定義動畫
animation: spin 8s infinite linear alternate;
spin: 動畫名稱
8s：動畫執(zhí)行一次所需要的時間
infinite: 動畫執(zhí)行的次數(shù)
linear: 動畫的速度函數(shù)，跟transition的速度函數(shù)相同
alternate: 表示動畫正向循環(huán)完畢后反向循環(huán)
如果想對動畫的運(yùn)行進(jìn)行控制，可以給元素增加animation-play-state屬性：
div{
animation-play-state: paused; /*paused為暫停*/
animation-play-state: running; /*running為開啟動畫*/
}
可以通過js控制這個屬性來完成。
7.3.2 實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: firstAni 5s infinite;
-webkit-animation: firstAni 5s infinite ;
}
@keyframes firstAni{
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 firstAni{ /*適用于safari和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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
7.3.4 @keyframes小結(jié)
- keyframes可以改變?nèi)我舛嗟臉邮?，任意多的次?shù)；
- 使用百分比來規(guī)定變化發(fā)生的時間，或者用from, to；
- 為了得到最佳的瀏覽器支持，應(yīng)始終定義0%和100%選擇器
注：IE10、Firefox、opera支持@keyframes和animation屬性；Chrome和Safari需要增加前綴-webkit-；IE9及之前不支持。
7.4 實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.wahaha{
width: 100px;
height: 100px;
text-align: center;
background: #CCCCCC;
line-height: 100px;
font-family: "microsoft yahei";
font-size: 50px;
animation: rotateYdir 3s infinite alternate;
-webkit-animation: rotateYdir 3s 2 alternate;
animation-play-state: paused;
-webkit-animation-play-state: paused;
border-radius: 10px;
}
@keyframes rotateYdir{
0%{transform: rotateY(0);}
100%{transform: rotateY(-360deg);}
}
@-webkit-keyframes rotateYdir{
0%{-webkit-transform: rotateY(0);}
100%{-webkit-transform: rotateY(-360deg);}
}
.yunxing{
animation-play-state: running;
-webkit-animation-play-state: running;
}
</style>
</head>
<body>
<div class="wahaha">6</div>
<script>
var div1=document.getElementsByClassName("wahaha");
div1[0].onmouseover=function(){
this.style.animationPlayState="running";
this.style.webkitAnimationPlayState="running"
}
</script>
</body>
</html>
7.6 小結(jié)
- 元素的變換：應(yīng)用transform屬性可以對元素進(jìn)行旋轉(zhuǎn)rotate，扭曲skew，位移translate，縮放scale；
- 元素樣式改變的過渡效果，應(yīng)用transition屬性可以改變和添加過渡效果；幾個速度函數(shù)：ease, ease-in, ease-out, ease-in-out, linear內(nèi)置函數(shù)：
transition: prop 0.5s linear 1s,prop是css屬性名； - 使用
@ketframes和animation屬性設(shè)置動畫循環(huán)。
