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

    版本:CSS3

    CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。你可以指定多个延迟时间,每个延迟将会分别作用于你所指定的相符合的css属性(transition-property

    示例

    /* <time>值 */
    transition-delay: 3s;
    transition-delay: 2s, 4ms;
    
    /* 全局变量 */
    transition-delay: inherit;
    transition-delay: initial;
    transition-delay: unset;
    

    浏览器支持

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

    语法

    transition-delay:<timing-function>

    取值:

    • <timing-function>:通过transition-property中定义被过渡属性,每个<timing-function>的值代表与这个属性相对应的timing function.

    说明:

    检索或设置对象延迟过渡的时间。

    • 如果提供多个属性值,以逗号进行分隔。
    • 对应的脚本特性为transitionDelay

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

    默认值0s
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体交互

    实例

    transition-delay: 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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:0.5s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay:0.5s;
        transition-timing-function: linear;
    }
    .box1{
        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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:0.5s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay:0.5s;
        transition-timing-function: linear;
    }
    
    //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-delay: 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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:1s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay:1s;
        transition-timing-function: linear;
    }
    .box1{
        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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:1s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay:1s;
        transition-timing-function: linear;
    }
    
    //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-delay: 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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:2s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay:2s;
        transition-timing-function: linear;
    }
    .box1{
        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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:2s;
        -webkit-transition-timing-function: linear;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay:2s;
        transition-timing-function: linear;
    }
    
    //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-delay: 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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:4s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay:4s;
        transition-timing-function: ease-in-out;
    }
    .box1{
        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 color;
        -webkit-transition-duration:2s;
        -webkit-transition-delay:4s;
        -webkit-transition-timing-function: ease-in-out;
        transition-property: width height background-color font-size left top color;
        transition-duration:2s;
        transition-delay: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);
    
     transition-delay:2s;
     -webkit-transition-delay:2s; /*safari*/