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的旋转动画:



源码如下:


  1. <!DOCTYPE HTML>

  2. <html>

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  5. <title>CSS3动画属性之Transitions</title>

  6. <style type="text/css">

  7. *{margin:0; padding:0;}

  8. body {font-size:10px; font-family:"微软雅黑"; text-align:center;}

  9. #demo {

  10. margin:-70px 0 0 -70px;

  11. top:50%;

  12. left:50%;

  13. width:140px;

  14. height:140px;

  15. line-height:140px;

  16. background:#6F6;

  17. color:#000;

  18. border:5px #fff solid;

  19. border-radius:75px;

  20. box-shadow:0 0 10px #690;

  21. overflow:hidden;

  22. position:absolute;

  23. -webkit-transition:

  24. margin 2s linear,

  25. width 2s linear,

  26. height 2s linear,

  27. font-size 2s linear,

  28. line-height 2s linear,

  29. background 2s linear,

  30. color 2s linear,

  31. border 2s linear,

  32. border-radius 2s linear,

  33. box-shadow 2s linear,

  34. -webkit-transform 2s linear;

  35. -moz-transition:

  36. margin 2s linear,

  37. width 2s linear,

  38. height 2s linear,

  39. font-size 2s linear,

  40. line-height 2s linear,

  41. background 2s linear,

  42. color 2s linear,

  43. border 2s linear,

  44. border-radius 2s linear,

  45. box-shadow 2s linear,

  46. -moz-transform 2s linear;

  47. -o-transition:

  48. margin 2s linear,

  49. width 2s linear,

  50. height 2s linear,

  51. font-size 2s linear,

  52. line-height 2s linear,

  53. background 2s linear,

  54. color 2s linear,

  55. border 2s linear,

  56. border-radius 2s linear,

  57. box-shadow 2s linear,

  58. -o-transform 2s linear;

  59. }

  60. #demo:hover {

  61. margin:-150px 0 0 -150px;

  62. width:300px;

  63. height:300px;

  64. font-size:22px;

  65. line-height:300px;

  66. background:#606;

  67. color:#fff;

  68. border:10px #d1d1d1 solid;

  69. border-radius:160px;

  70. box-shadow:0 0 20px #636;

  71. -webkit-transform:rotate(720deg);

  72. -moz-transform:rotate(720deg);

  73. -o-transform:rotate(720deg);

  74. }

  75. </style>

  76. </head>

  77. <body>

  78. <div id="demo">CSS3动画属性之Transitions</div>

  79. </body>

  80. </html>

Words translated by CCJK

146,096,379

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP