Blog

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>
facebooktwittergoogle_pluslinkedinmail

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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