深入了解 CSS3 新特性（8）CSS3 的 Transitions, Transforms 和 Animation
|
- UID
- 1066743
|
深入了解 CSS3 新特性（8）CSS3 的 Transitions, Transforms 和 Animation
CSS3 的 Transitions, Transforms 和 AnimationTransitions先说说 Transition，Transition 有下面些具体属性：
transition-property：用于指定过渡的性质，比如 transition-property:backgrond 就是指 backgound 参与这个过渡
transition-duration：用于指定这个过渡的持续时间
transition-delay：用于制定延迟过渡的时间
transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
可能您觉得摸不着头脑，其实很简单，我们用一个例子说明，参看一下如下代码：
清单 26. CSS3 的 Transition1
2
3
4
5
6
7
8
9
10
11
12
| <div id="transDiv" class="transStart"> transition </div>
.transStart {
background-color: white;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
.transEnd {
background-color: red;
}
|
这里他说明的是，这里 id 为“transDiv”的 div，当它的初始“background-color”属性变化时（被 JavaScript 修改），会呈现出一种变化效果，持续时间为 0.3 秒，效果为均匀变换（linear）。如：该 div 的 class 属性由“transStart”改为“transEnd”，其背景会由白（white）渐变到红（red）。
Transform再来看看 Transform，其实就是指拉伸，压缩，旋转，偏移等等一些图形学里面的基本变换。见如下代码：
清单 27. CSS3 的 Transform1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .skew {
-webkit-transform: skew(50deg);
}
.scale {
-webkit-transform: scale(2, 0.5);
}
.rotate {
-webkit-transform: rotate(30deg);
}
.translate {
-webkit-transform: translate(50px, 50px);
}
.all_in_one_transform {
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px);
}
|
“skew”是倾斜，“scale”是缩放，“rotate”是旋转，“translate”是平移。最后需要说明一点，transform 支持综合变换。可见其效果图如下：
图 20. CSS3 的 Transform 效果图 现在您应该明白 Transform 的作用了吧。结合我们之前谈到的 Transition，将它们两者结合起来，会产生类似旋转，缩放等等的效果，绝对能令人耳目一新。
Animation最后，我们来说说 Animation 吧。它可以说开辟了 CSS 的新纪元，让 CSS 脱离了“静止”这一约定俗成的前提。以 webkit 为例，见如下代码：
清单 28. CSS3 的 Animation1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| @-webkit-keyframes anim1 {
0% {
Opacity: 0;
Font-size: 12px;
}
100% {
Opacity: 1;
Font-size: 24px;
}
}
.anim1Div {
-webkit-animation-name: anim1 ;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
|
首先，定义动画的内容，如清单 28 所示，定义动画“anim1”，变化方式为由“透明”（opacity: 0）变到“不透明”（opacity: 1），同时，内部字体大小由“12px”变到“24px”。然后，再来定义 animation 的变化参数，其中，“duration”表示动画持续时间，“iteration-count”表示动画重复次数，direction 表示动画执行完一次后方向的变化方式（如第一次从右向左，第二次则从左向右），最后，“timing-function”表示变化的模式。
其实，CSS3 动画几乎支持所有的 style 变化，可以定义各种各样的动画效果以满足我们用户体验的需要。
这里，我们介绍了 CSS3 的主要的新特性，这些特性在 Chrome 和 Safari 中基本都是支持的，Firefox 支持其中的一部分，IE 和 Opera 支持的较少。读者们可以根据集体情况有选择的使用。 |
|
|
|
|
|
