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 }