transition-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

A propriedade CSS transition-delay (atraso de transição) determina o tempo de duração da espera antes de iniciar um efeito de transição(transition effect) quando seu valor muda.

Experimente

transition-delay: 250ms; transition-property: margin-right;

transition-delay: 1s; transition-property: background-color;

transition-delay: 1s; transition-property: margin-right, color;

transition-delay: 1s, 250ms; transition-property: margin-right, color;

<section id="default-example">   <div id="example-element">Hover to see<br />the transition.</div> </section>

#example-element {   background-color: #e4f0f5;   color: #000;   padding: 1rem;   border-radius: 0.5rem;   font: 1em monospace;   width: 100%;   transition: margin-right 2s; }  #default-example:hover > #example-element {   background-color: #909;   color: #fff;   margin-right: 40%; }

Essa espera, ou atraso de transição, pode ser zero, positiva ou negativa:

Um valor de 0s(ou 0ms) iniciará o efeito de transição imediatamente.
Um valor positivo atrasará o inicio do efeito de transição de acordo com o tempo estabelecido.
Um valor negativo iniciará o efeito de transição imediatamente e parcialmente durante o efeito. Em outras palavras, o efeito será animado como se já tivesse sido executado pelo tempo estipulado.

Você pode especificar vários atrasos, o que é útil quando é necessário realizar a transição de várias propriedades. Cada atraso pode ser aplicado à propriedade correspondente como especificado pela propriedade de transição(transition-property), que atua como uma lista mestre. Se existem menos atrasos do que o determinado pela lista mestre, a lista de valores de atraso será repetida até que seja suficiente. Se existem mais atrasos, a lista de valores de atraso será trucanda(limitada) ao combinar o número de propriedades. Em ambos os casos, a declaração CSS permacene válida.

Syntax

css

/* Valores de Tempo <time>  */ transition-delay: 3s; transition-delay: 2s, 4ms;  /* Valores Globais */ transition-delay: inherit; transition-delay: initial; transition-delay: unset;

Valores

<time>: Indica a quantidade de tempo de espera entre um valor de propriedade e o inicio do efeito de transição(transition effect).

Sintaxe Formal

transition-delay = 
  <time>#

Exemplos

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

Especificações

Specification
CSS Transitions # transition-delay-property

Initial value	`0s`
Aplica-se a	all elements, `::before` and `::after` pseudo-elements
Inherited	não
Computed value	as specified
Animation type	Not animatable