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

 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 }