CSS transition属性用法及代码示例

CSS中的transition属性用于产生一些过渡效果。过渡是下面列出的四个属性的组合：

transition-property
transition-duration
transition-timing-function
transition-delay

注意：可以使用pseudo-classes(如：hover或：active)或使用JavaScript动态设置的类在两种状态(悬停和活动)中定义过渡效果。

用法:

transition:transition-property transition-duration 
transition-timing-function transition-delay;

注意：如果未定义任何值，则浏览器将采用默认值。

属性值：

transition-property:它指定应将过渡效果应用到的CSS属性。
transition-duration:它指定过渡动画应花费的时间长度。
transition-timing-function：它指定过渡的速度。
transition-delay:它指定过渡延迟或过渡开始的时间。

例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            CSS transition Property 
        </title> 
          
        <style>  
            div { 
                width:100px; 
                height:270px; 
                background:green; 
                transition:width 5s ease-in .2s; 
                display:inline-block; 
            } 
              
            div:hover { 
                width:300px; 
            } 
        </style> 
    </head> 
      
    <body style = "text-align:center;"> 
          
        <h1>GeeksforGeeks</h1> 
          
        <h2>Transition Property</h2> 
          
        <div> 
            <p>transition-property:width</p> 
            <p>transition-duration:5s</p> 
            <p>transition-timing-function:ease-in</p> 
            <p>transition-dealy:.8s</p> 
        </div> 
    </body> 
</html>

输出：

过渡效果之前：
过渡效果后：

支持的浏览器：transition属性支持的浏览器如下：

Google Chrome 26.0、4.0 -webkit-
Internet Explorer 10.0
Firefox 16.0、4.0 -moz-
Safari 6.1、3.1 -webkit-
Opera 12.1，10.5 -o-

相关用法

注：本文由纯净天空筛选整理自DannanaManoj大神的英文原创作品 CSS | transition Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。