css3 2D转换（2D Transform） 动画（Animation）

transform

• 版本：CSS3

内核类型	写法
Webkit(Chrome/Safari)	-webkit-transform
Gecko(Firefox)	-moz-transform
Presto(Opera)	-o-transform
Trident(IE)	-ms-transform
W3C	transform

none：无转换

matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX(<length>)：指定对象X轴（水平方向）的平移

translateY(<length>)：指定对象Y轴（垂直方向）的平移

rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义

scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

scaleX(<number>)：指定对象X轴的（水平方向）缩放

scaleY(<number>)：指定对象Y轴的（垂直方向）缩放

skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0s

kewX(<angle>)：指定对象X轴的（水平方向）扭曲

skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲

transform-origin  设置或检索对象以某个原点进行转换。

默认值：50% 50%，效果等同于center center

取值：

<percentage>：用百分比指定坐标值。可以为负值。

<length>：用长度值指定坐标值。可以为负值。

left：指定原点的横坐标为left

center①：指定原点的横坐标为center

right：指定原点的横坐标为right

top：指定原点的纵坐标为top

center②：指定原点的纵坐标为center

bottom：指定原点的纵坐标为bottom

Animation

内核类型	写法
Webkit(Chrome/Safari)	-webkit-animation
Gecko(Firefox)	-moz-animation
Presto(Opera)
Trident(IE)	-ms-animation
W3C	animation

取值：

[ animation-name ]：检索或设置对象所应用的动画名称

检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

如果提供多个属性值，以逗号进行分隔。

[ animation-duration ]：检索或设置对象动画的持续时间

[ animation-timing-function ]：检索或设置对象动画的过渡类型

默认值：ease

linear：线性过渡。

ease：平滑过渡。

ease-in：由慢到快。

ease-out：由快到慢。

ease-in-out：由慢到快再到慢。

cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

[ animation-delay ]：检索或设置对象动画延迟的时间

[ animation-iteration-count ]：检索或设置对象动画的循环次数

默认值：1

infinite：无限循环

<number>：指定对象动画的具体循环次数

[ animation-direction ]：检索或设置对象动画在循环中是否反向运动

默认值：normal

normal：正常方向

alternate：正常与反向交替 

在HTML中设置一个div

 *{
     margin:;
     padding:;
 }
 div{
     position: absolute;
     width: 50px;
     height: 50px;
     outline: 1px red solid;
     background-color: blue;
     left: 50px;
     top:50px;
     -webkit-animation:animation 2s ease 2 ;

 }
 @-webkit-keyframes animation{
    0%{
        -webkit-transform:translate(50px,50px);
       /*left: 50px;*/
       /*top: 50px;*/

    }
     25%{
         -webkit-transform:translate(100px,50px);
         /*left: 100px;*/
         /*top: 50px;*/
     }
     50%{
         -webkit-transform:translate(100px,100px);
         /*left: 100px;*/
         /*top: 100px;*/
     }
     75%{
         -webkit-transform:translate(50px,100px);
          /*left: 50px;*/
         /*top:100px;*/
     }
     100%{
         -webkit-transform:translate(50px,50px);
         /*left: 50px;*/
         /*top: 50px;*/
     }

 }