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
取值：
：用百分比指定坐标值。可以为负值。
：用长度值指定坐标值。可以为负值。
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 |
取值：
[ ]：检索或设置对象所应用的动画名称
检索或设置对象所应用的动画名称，必须与规则配合使用，因为动画名称由定义
如果提供多个属性值，以逗号进行分隔。
[ ]：检索或设置对象动画的持续时间
[ ]：检索或设置对象动画的过渡类型
默认值：ease
linear：线性过渡。
ease：平滑过渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
[ ]：检索或设置对象动画延迟的时间
[ ]：检索或设置对象动画的循环次数
默认值：1
infinite：无限循环
：指定对象动画的具体循环次数
[ ]：检索或设置对象动画在循环中是否反向运动
默认值：normal
- normal： 正常方向 alternate： 正常与反向交替
在HTML中设置一个div
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 div{ 6 position: absolute; 7 width: 50px; 8 height: 50px; 9 outline: 1px red solid;10 background-color: blue;11 left: 50px;12 top:50px;13 -webkit-animation:animation 2s ease 2 ;14 15 }16 @-webkit-keyframes animation{17 0%{18 -webkit-transform:translate(50px,50px);19 /*left: 50px;*/20 /*top: 50px;*/21 22 }23 25%{24 -webkit-transform:translate(100px,50px);25 /*left: 100px;*/26 /*top: 50px;*/27 }28 50%{29 -webkit-transform:translate(100px,100px);30 /*left: 100px;*/31 /*top: 100px;*/32 }33 75%{34 -webkit-transform:translate(50px,100px);35 /*left: 50px;*/36 /*top:100px;*/37 }38 100%{39 -webkit-transform:translate(50px,50px);40 /*left: 50px;*/41 /*top: 50px;*/42 }43 44 }