[关闭]
@ruoli 2017-10-20T22:23:43.000000Z 字数 905 阅读 1552

HTML5动画过度效果属性transition

Web前端

1、transition的功能定义

transition的功能，使css的属性值在一定的时间内平滑地过渡。
这种效果可以在鼠标点击、划过、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

2、transition可定义的属性

transition-property:设置哪些属性进行过渡
transition-duration：完成过渡动画效果的时间，默认是0。
transition-timing-function:设置动画的缓动效果，默认是ease（逐渐变慢）。
其它常用值：ease-in，加速；
ease-out，减速；
ease-in-otlt,加速然后减速。
transition-delay:设置动画开始的延迟时间，默认是0

3、代码示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>transition-示例-Ruo.L</title>
  6.     <style type="text/css"> 
  7.         .box{ 
  8.             width: 100px;
  9.             height:100px;
  10.             margin:50px auto;
  11.             background-color:#f00;
  12.             transition:all 1s;
  13.         } 
  14.         .box:hover{ 
  15.             width:200px;
  16.             height:200px; 
  17.             border-radius:50%; 
  18.             background-color:#666;
  19.             transition:all 1s ease-in 1s;
  20.             /*transition-property:width,height,border-radius; 
  21.             transition-duration:1s; 
  22.             transition-timing-function:ease-in;
  23.             transition-delay:1s; */
  24.         }
  25.     </style> 
  26. </head>
  27. <body>
  28.     <div class="box"></div>
  29. </body>
  30. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注