• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • transition-duration

    版本:CSS3

    transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ,表示不出现过渡动画。可以指定多个时长,每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数,那么时长列表会重复。如果时长列表更长,那么该列表会被裁减。两种情况下,属性列表都保持不变。

    这是一个实验中的功能
    此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

    示例

    /* <time> 值 */
    transition-duration: 6s;
    transition-duration: 120ms;
    transition-duration: 1s, 15s;
    transition-duration: 10s, 30s, 230ms;
    
    /* 全局值 */
    transition-duration: inherit;
    transition-duration: initial;
    transition-duration: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上浏览器都支持transition-property

    语法

    transition-duration:<time>

    取值:

    <time>:指定对象过渡的持续时间。<time>类型数据。表示过渡属性从旧的值转变到新的值所需要的时间。如果时长是0s,表示不会呈现过渡动画,属性会瞬间完成转变。不接受负值。

    说明:

    检索或设置对象过渡的持续时间。

    • 如果提供多个属性值,以逗号进行分隔。
    • 对应的脚本特性为transitionDuration
    默认值0s
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体交互

    例子

    transition-duration: 0.5s

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
        -webkit-transition-duration:0.5s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform -webkit-transform color;
        transition-duration:0.5s;
        transition-timing-function: ease-in-out;
    }
    .box1{
        transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
        -webkit-transition-duration:0.5s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform -webkit-transformv color;
        transition-duration:0.5s;
        transition-timing-function: ease-in-out;
    }
    
    //JS
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-duration: 1s

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
        -webkit-transition-duration:1s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform color;
        transition-duration:1s;
        transition-timing-function: ease-in-out;
    }
    .box1{
        transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
        -webkit-transition-duration:1s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform -webkit-transform color;
        transition-duration:1s;
        transition-timing-function: ease-in-out;
    }
    
    //JS
    
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-duration: 2s

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    
    //CSS
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform -webkit-transform color;
        transition-duration:2s;
        transition-timing-function: ease-in-out;
    }
    .box1{
        transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
        -webkit-transition-duration:2s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform -webkit-transform color;
        transition-duration:2s;
        transition-timing-function: ease-in-out;
    }
    
    //JS
    
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);
    

    transition-duration: 4s

    <div class="parent">
      <div class="box">lorem</div>
    </div>
    
    //CSS
    
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        font-size: 20px;
        left: 0px;
        top: 0px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
        -webkit-transition-duration:4s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform -webkit-transform color;
        transition-duration:4s;
        transition-timing-function: ease-in-out;
    }
    .box1{
        transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        width: 50px;
        height: 50px;
        color: yellow;
        font-size: 18px;
        left: 150px;
        top:25px;
        position:absolute;
        -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
        -webkit-transition-duration:4s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top transform -webkit-transform color;
        transition-duration:4s;
        transition-timing-function: ease-in-out;
    }
    
    //JS
    function updatetransition() {
      var el = document.queryselector("div.box");
       
      if (el) {
        el.classname = "box1";
      }
     else {
        el = document.queryselector("div.box1");
        el.classname = "box";
      }
       
      return el;
    }
    
    var intervalid = window.setinterval(updatetransition, 7000);