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
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 }