css 3 动画

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

 transition 属性介绍：

transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如：

.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