css 3 动画

1.transition,其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。

transition 属性介绍：


例如：

.trans {
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.trans:hover {
background-color: #486AAA;
color: #fff;
}

注意浏览器的兼容性。

2.transform ,指变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸，压缩，旋转，偏移。

　transform 属性介绍：

　

旋转rotate

扭曲skew

缩放scale

移动translate

矩阵变形matrix

　　以rotate为例，3D Transform 中 rotate 有三种方法，rotateX(angle) X轴旋转，rotateY(angle) Y轴旋转，rotateZ(angle) Z轴旋转

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

例如：

　　

.trans_effect {
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
.trans_effect:hover {
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);
}

注意浏览器的兼容性。

3.animation

　使用：

　　

@-webkit-keyframes glow {
0% {
-webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
border-color: rgba(160, 179, 214, 0.5);
}
100% {
-webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
border-color: rgba(160, 179, 214, 1.0);
}
}
.anim_image {
padding:3px;
border:1px solid #beceeb;
background-color:white;
-moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
-webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
background-color:#f0f3f9;
-webkit-animation-name: glow;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}

注意浏览器的兼容性

此案例演示效果：http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-7.html

4.transition 与 transform 综合使用案例（两图片轮流播放）：

　

img{
width: 100px;
height:100px;
transition: all 1s ease-in-out ;
cursor: pointer;
}

.img_top{
position: absolute;
transform: scale(0,0);
opacity: 0;
}

.anim_box:hover .img_top{
opacity:1;
transform: scale(1, 1);
}

.anim_box:hover .img_bottom{
transform: scale(0,0);
}

html：

<div class="anim_box">
<img class="img_top" src="static/image/palm.jpg">
<img class="img_bottom" src="static/image/trees.jpg">
</div>

案例效果：http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-11.html