css3动画

过渡transition

使用CSS实现从一种效果转换到另一种效果
兼容性: IE10+
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

transition: 属性 时间, 属性 时间... ；

如

div{
    transition:width 2s;
}
div:hover{
    width:300px;
}

同时监视多个属性

div{
    width:100px;
    height:100px;
    backgroud:red;
    transition:width 2s,height 2s, transform 2s;
}
div:hover{
    width:200px;
    heigth:200px;
    transform:rotate(180deg);
}

CSS3-2D转换

可以移动，缩放，反转，旋转，拉伸元素
兼容:IE9+
使用方式:

transform:xx;
-ms-transform:xx; /*IE9*/
-webkit-transform:xx; /*Safari and Chrome*/
-moz-transform:xx; /*firefox*/
-o-transform:xx; /*opera*/

translate()
作用:移动元素，translate(水平距离，垂直距离)
如:

  transform:translate(50px,100px);
}

把div水平方向移动50px，垂直方向移动100px；

rotate()
作用：以一定度数旋转元素，rotate(角度)
如：

div{
 transform:rotate(30deg);
}

把div顺时针旋转30度
transform-origin:0 0; 以左上角作为中心点

scale()
作用:以一定比例放大缩小元素，scale(水平方向倍数，垂直方向倍数)
如：

div{
  transform:scale(2,4);
}

skew()
作用：绕水平或垂直方向旋转
如:

div{
  transform:skew(30deg,20deg);
}

skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。