mozilla
Your Search Results

    transition-delay

    Our volunteers haven't translated this article into Deutsch yet. Join us and help get the job done!

    Summary

    The transition-delay property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.

    A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

    You may specify multiple delays; each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

    Syntax

    /* <time> values */
    transition-delay: 3s;
    transition-delay: 2s, 4ms;
    
    /* Global values */
    transition-delay: inherit;
    transition-delay: initial;
    transition-delay: unset;
    

    Values

    <time>
    Is a <time> denoting the amount of time to wait between a property's value changing and the start of the animation effect.

    Formal syntax

    <time>#

    Examples

    transition-delay: 0.5s

     <div class="parent">
      <div class="box">Lorem</div>
    </div>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        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;
        background-color: blue;
        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;
    }
    
    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>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        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;
        background-color: blue;
        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;
    }
    
    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>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        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;
        background-color: blue;
        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;
    }
    
    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>
      
    .parent { width: 250px; height:125px;}
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        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;
        background-color: blue;
        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;
    }
    
    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);
    

    Specifications

    Specification Status Comment
    CSS Transitions
    The definition of 'transition-delay' in that specification.
    Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 -webkit 4.0 (2.0) -moz
    16.0 (16.0)
    10.0 11.6 -o
    12.10 #
    3.0 -webkit
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.1 -webkit 4.0 (2.0) -moz
    16.0 (16.0)
    ? 10.0 -o
    12.10 #
    3.2 -webkit

    See also

    Document Tags and Contributors

    Last updated by: Sebastianz,