CSS3 提供了transition 过渡
、transform 变换
和animation 动画
来实现页面中的一些样式转化,这篇文章会对这几个属性做简单的介绍,然后比较一下 CSS3 动画和 JS 动画哪个性能更好。
Transition, transform 和 animation 介绍
transition
transition允许css的属性值在一定的时间区间内平滑地过渡,语法如下:
transition : transition-property transition-duration transition-timing-function transition-delay [, ...]
- transition-property
用来指定执行transition效果的属性,可以为none
,all
或者特定的属性。 - transition-duration
动画执行的持续时间,单位为s(秒)
或者ms(毫秒)
。 - transition-timing-function
变换速率效果,可选值为ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(自定义时间曲线)
。 - transition-delay
用来指定动画开始执行的时间,取值同transition-duration
,但是可以为负数。
DEMO:http://codepen.io/CodingMonkeyzh/pen/ZGBRVe
transform
transform 分为2D 和 3D,这里暂时只介绍比较常用的2D transform,其主要包含以下几种变换:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix,语法如下:
transform: rotate | scale | skew | translate |matrix;
- rotate 旋转
rotate 的单位是deg 度
,正数表示顺时针旋转,负数表示逆时针旋转。
DEMO:http://codepen.io/CodingMonkeyzh/pen/XbNYOa - scale 缩放
scale 的取值范围是0~n
,小于1
时表示缩小,反之表示放大。例如scale(0.5, 2)
表示水平方向缩小1倍,垂直方向放大1倍, 另外,也可以通过scaleX
或者scaleY
对一个方向进行设置。
DEMO:http://codepen.io/CodingMonkeyzh/pen/doOKrg - skew 扭曲
skew 的单位跟rotate
一样都是deg 度
。例如skew(30deg, 10deg)
表示水平方向倾斜30度,垂直方向倾斜10度。
DEMO:http://codepen.io/CodingMonkeyzh/pen/KpNeYg - translate 偏移
偏移同样包括水平偏移和垂直偏移。translate(x,y)
水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)
仅水平方向移动(X轴移动);translateY(Y)
仅垂直方向移动(Y轴移动)。
DEMO:http://codepen.io/CodingMonkeyzh/pen/waoXbB
animation
CSS3 中的 animation 是通过一个叫Keyframes 关键帧
的玩意来控制的,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,语法如下:
@keyframes IDENT {
from {
Properties: Properties value;
}
Percentage {
Properties: Properties value;
}
to {
Properties: Properties value;
}
}
或者全部写成百分比的形式:
@keyframes IDENT {
0% {
Properties: Properties value;
}
Percentage {
Properties: Properties value;
}
100% {
Properties: Properties value;
}
}
animation和transition一样有自己相对应的属性,那么在animation主要有以下几种:animation-name;animation-duration;animation-timing-function;animation-delay;animation-iteration-count;animation-direction;animation-play-state。下面对其中的一些属性进行解释:
- animation-name 关键帧名
用来定义一个动画的名称,也就是由前面的keyframes
创建的动画名,默认值为none
,当值为none
时,将没有任何动画效果。如果我们要同时附几个animation
给一个元素,只要用逗号,
隔开即可。 - animation-iteration-count 动画循环次数
默认为1
,如果要进行无限循环,只要设为infinite
即可。 - animation-direction 动画播放的方向
其只有两个值,默认值为normal
,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate
,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。 - animation-play-state 播放状态
其主要有两个值,running和paused,其中running为默认值。可以通过paused将正在播放的动画停下了,也可以通过running将暂停的动画重新播放。这个属性不常用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。