2D转换
2D 转换（须在style里面定义）：位移，缩放，旋转，斜切（扭曲）
转换---关键字：transform;
属性有：
1， 位移：translate（0px，0px）
属性值：（0px,0px）括号里跟两个值，用逗号分割，使元素沿x轴，y轴坐标位移，第二个值可以不给，如果不给则默认为0。
2， 缩放：scale（.5, .5）
属性值：（.5 , .5）括号里跟两个小数（百分数），用逗号分割，元素中心点做为缩放基点，
使元素沿x轴，y轴坐标按比例缩放，第二个值可以不给，如果不给则默认为0。
。
3， 旋转：rotate（5deg）或rotate（1rad）其中Rad：弧度，deg：度数。
以元素左上角为基点，按值并且顺时针旋转。
重置原点：transform-origin:0 0;
Origin后面跟两个number，使元素按x轴，y轴重置旋转原点。
4， 斜切（扭曲）：skew（1rad,1rad）
属性值：（1rad,1rad）括号里跟两个弧度值rad确定扭曲程度，其值分别对应x,y轴，其第二个值可以不提供，如不提供则默认为0。
过度（须在style里面定义）
过度---关键字：transition 后面紧跟4个值 如：
Transition:[transition-property]||[transition-duration]||
[transition-timing-function]||[transition-delay];
即：transition: all 4s linear 2s;
其值含义分别为：
1， property:检索或设置对象中的参与过度的属性，其取值范围有：
All（默认值）：所有可以进行过度的css属性。
None：不指定过度的css属性。
2， duration：检索或设置对象过度的持续时间，其取值范围有：
time：指定对象过度的持续时间。
3， timing-function：检索或设置对象中过度的动画类型，其取值范围有（列举5个）：
linear：线性过度。
Ease：平滑过度。
Ease-in：由慢到快。
Ease-out：由快到慢。
Ease-in-out：由慢到快再到慢。
4， delay：检索或设置对象延迟延迟过度的时间，其取值范围有：
time：指定对象过度的时间。
下面是一个代码实现过度的实例：
|
<style type="text/css"> |
|
|
|
|
|
|
*{ |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
.out { |
|
|
width: 800px; |
|
|
padding: 1px; |
|
|
|
|
|
} |
|
|
|
|
|
.out div { |
|
|
width: 100px; |
|
|
height: 100px; |
|
|
margin: 25px; |
|
|
|
|
|
font-size: 12px; |
|
|
text-align: center; |
|
|
line-height: 100px; |
|
|
} |
|
|
|
|
|
.inner1 { |
|
|
-webkit-transition: all 4s linear; |
|
|
} |
|
|
.inner2 { |
|
|
-webkit-transition: all 4s ease; |
|
|
} |
|
|
.inner3 { |
|
|
-webkit-transition: all 4s ease-in; |
|
|
} |
|
|
.inner4 { |
|
|
-webkit-transition: all 4s ease-out; |
|
|
} |
|
|
.inner5 { |
|
|
-webkit-transition: all 4s ease-in-out; |
|
|
} |
|
|
|
|
|
.out:hover div { |
|
|
margin-left: 75%; |
|
|
-webkit-transform: rotate(360deg); |
|
|
border-radius: 50%; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="out"> |
|
|
<div class="inner1">线性过渡</div> |
|
|
<div class="inner2">平滑过渡</div> |
|
|
<div class="inner3">由慢到快</div> |
|
|
<div class="inner4">由快到慢</div> |
|
|
<div class="inner5">由慢到快再到慢</div> |
|
|
|
|
|
</div> |
|
|
</body> |
动画
关键字：animation 属性值有：
1， name：检索或设置对象所应用的动画名称，取值范围有：
none：不引用任何动画名称。
Identifier：定义一个或多个动画名称。
其必须与@keyframes配合使用，因为动画名由@keyframes提供
2， duration：检索或设置动画的持续时间。
Time：时间。
3，-timing-function：检索或设置动画的过度类型。
取值同过度同。
4,delay：检索或设置动画延迟的时间。
Time：时间。
5 count：检索或设置对象动画的循环次数。
Infinite：无限循环。
Number：指定动画的具体循环次数。
6 ，direction：检索或设置对象动画在循环中的是否反向运动。
Normal：正常方向。
Alternate：正常与反向交替。
浙公网安备 33010602011771号