mozilla
Los resultados de tu búsqueda

    transition-delay

    Resumen

    La propiedad CSS transition-delay especifica la cantidad de tiempo a esperar entre un cambio pedido hacia una propiedad y el comienzo de un efecto de transicion (transition effect).

    Un valor de 0s, o 0ms, indica que la propiedad comenzará a animar la transición inmediatamente cuando el valor cambie; valores positivos retrasaran el comienzo del efecto de transicion por el numero de segundos correspondiente. Valores negativos causaran que la transicion comience inmediatamente, pero causando que el efecto de la transicion pareciera que empiece por la mitad de la animacion.

    Puedes especificar multiples retrasos ("delays"); cada retraso se aplicará a la propiedad correspondiente especificada por la propiedad transition-property, que actua como una lista maestra. Si hay menos delays especificados que en la lista maestra, valores perdidos son puestos en el valor inicial (0s).

    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

    Formal syntax: <time>#
    
    transition-delay: 3s
    transition-delay: 2s, 4ms
    
    transition-delay: initial
    

    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.

    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 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

    Etiquetas y colaboradores del documento

    Contributors to this page:
    Última actualización por: teoli,