CSS3一览（2） 变形和动画

CSS3的新功能我也看了一一些，做了一个简要的笔记，总结一下，当成学习笔记发上来，这是CSS3的第二篇了。

变形transform

1. 变形原点：transform-origin

格式：transform-origin：x y z

说明

值	说明
X Y	可能的值：表位置的left、top、right、bottom、center，表长度的length（px），表百分比的%
Z	可能的值：length（px）

 

2. translate：定义转换

格式：transform：translate（20px，50px）：表示水平向右移20px，垂直向下移动50px，可以省略一个参数表示只水平移动

此外还有translate3d，定义3d转换，translateX、translateY、translateZ只转换一个方向

 

3. rotate：定义旋转

格式：transform：rotate(30deg)表示围绕原点顺时针旋转30度

和translate一样，此函数拥有很多拓展版本

 

4. scale：定义缩放

格式：transform：scale（150%，50%） 表示水平放大到150% 垂直缩小到50%

同样拥有~3d、~X、~Y、~Z拓展版本

 

5. skew：定义倾斜

格式：transform：skew（30deg,0deg） 表示沿着原点水平倾斜30度，垂直不倾斜

同样拥有拓展版本

 

 

过渡动画  transision

格式：transition：property duration timing-function delay

例子：transition:color 0.25s ease-in;

说明：

属性	说明
Property	规定过度动画作用的CSS属性  比如color、background等
Duration	过渡动画持续的时常
Timing-function	过渡动画的速度曲线，有预设值：ease、linear、ease-in、ease-out、ease-in-out，以及通过贝塞尔曲线函数设置：cubic-bezier（n,n,n,n）-n
Delay	定义过渡动画从何开始

 

自定义动画 animation

格式：animation：name duration timing-function delay iteration-count direction

例子：

@keyframesanim{

0%{

left:0;

}

50%{

left:50%;

transform:rotate(3600deg)scale(2,2);

color:red;

}

100%{

left:0;

}

}

animation:anim6s ease-out infinite;

说明：

值	说明
@keyframes	定义一个动画，格式为@keyframes： name{selector {css-styles;}}；其中selector取值可以是百分比，也可以是from（=0%）、to（=100%）
Name	keyframes的名字
Duration	持续时常
timing-function	速度曲线，有预设值：ease、linear、ease-in、ease-out、ease-in-out，以及通过贝塞尔曲线函数设置：cubic-bezier（n,n,n,n）-n
Delay	定义从何开始，延迟
iteration-count	动画的播放次数，infinite参数表示无限次播放
Direction	表示是否要反响播放动画
animation-paly-state	规定动画正在运行或停止，需要单独写出来的属性