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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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.
transition-delay: 3s;
transition-delay: 2s, 4ms;
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
<time>
- Indica a quantidade de tempo de espera entre um valor de propriedade e o inicio do efeito de transição(transition effect).
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);
BCD tables only load in the browser