Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
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 setembro de 2015.
A propriedade CSStransition-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> <div>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(ou0ms) 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> <div>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> <div>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> <div>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> <div>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::afterpseudo-elements |
| Inherited | não |
| Computed value | as specified |
| Animation type | Not animatable |