CSS3动画属性之Transitions
今天再向大家介绍CSS3的一个经典——动画属性：Transitions。Transitions有三个参数property、duration、timing-function。
Property：表示某属性名称，即将要设置动画的那个属性，如background、color、height、width等；
Duration：表示动画执行时间，即将在多少时间内完成动画，如0.5s表示半秒，1s表示1秒；
Timing-function：表示执行动画的种类，可理解为过度效果，比如linear(匀速渐变)、ease-in(由慢到快渐变)、ease-out(由快到慢渐变)等。
来实例说明下：有一段落p，背景色为红色，字体为白色，现在要实现一个动画效果是，当鼠标悬停到此段落p上时，在2秒时间完成背景色渐变为黑色的动画。应该这么写：
p {
background:#f00;
-webkit-transition:background 2s linear;
-moz-transition:background 2s linear;
-o-transition:background 2s linear;
-ms-transition:background 2s linear;
transition:background 2s linear;
color:#fff;
}
p:hover {background:#000;}
* 注意：此属性在不同浏览器下需要带有不同的前缀（例如-webkit-****等）
另外，Transitions属性中的三个参数是可以拆开表达的，就好比我们常见的background能拆分成background-image、background-repeat、background-position等一样的道理。因此例子中的“transition:background 2s linear;”可以这样写：
transition-property:background;
transition-duration:2s;
transition-timing-funcion:linear;
上面例子中，我们是做了背景色这一个属性变化的动画，那如果是多种属性同时变化的动画该怎么来实现呢？这也就是下面将介绍的组合动画。
Elements {transitions:property1 duration timing-funcion, transitions:property2 duration timing-funcion, ..., transitions:propertyN duration timing-funcion;}
很容易理解吧，下面结合前面学的transform变形属性做了一个超炫的组合动画，即实现图1到变成图2的旋转动画：
源码如下：
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>CSS3动画属性之Transitions</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- body {font-size:10px; font-family:"微软雅黑"; text-align:center;}
- #demo {
- margin:-70px 0 0 -70px;
- top:50%;
- left:50%;
- width:140px;
- height:140px;
- line-height:140px;
- background:#6F6;
- color:#000;
- border:5px #fff solid;
- border-radius:75px;
- box-shadow:0 0 10px #690;
- overflow:hidden;
- position:absolute;
- -webkit-transition:
- margin 2s linear,
- width 2s linear,
- height 2s linear,
- font-size 2s linear,
- line-height 2s linear,
- background 2s linear,
- color 2s linear,
- border 2s linear,
- border-radius 2s linear,
- box-shadow 2s linear,
- -webkit-transform 2s linear;
- -moz-transition:
- margin 2s linear,
- width 2s linear,
- height 2s linear,
- font-size 2s linear,
- line-height 2s linear,
- background 2s linear,
- color 2s linear,
- border 2s linear,
- border-radius 2s linear,
- box-shadow 2s linear,
- -moz-transform 2s linear;
- -o-transition:
- margin 2s linear,
- width 2s linear,
- height 2s linear,
- font-size 2s linear,
- line-height 2s linear,
- background 2s linear,
- color 2s linear,
- border 2s linear,
- border-radius 2s linear,
- box-shadow 2s linear,
- -o-transform 2s linear;
- }
- #demo:hover {
- margin:-150px 0 0 -150px;
- width:300px;
- height:300px;
- font-size:22px;
- line-height:300px;
- background:#606;
- color:#fff;
- border:10px #d1d1d1 solid;
- border-radius:160px;
- box-shadow:0 0 20px #636;
- -webkit-transform:rotate(720deg);
- -moz-transform:rotate(720deg);
- -o-transform:rotate(720deg);
- }
- </style>
- </head>
- <body>
- <div id="demo">CSS3动画属性之Transitions</div>
- </body>
- </html>
Need a translation service?
Please enter your personal details and we will contact you shortly
Words translated by CCJK
146,096,379Over 95% of our clients recommend our language services to others
CHINESE
