Propriedade CSS transition-duration

A propriedade CSS transition-duration define quanto tempo uma animação de transição leva para ir do seu estado inicial ao seu estado final. É uma das propriedades CSS3 e um componente longhand do shorthand transition.

Este capítulo explica como escrever durações válidas, como uma única duração difere de uma lista separada por vírgulas, as armadilhas (valores zero, unidades ausentes, comprimentos de lista incompatíveis) e como a propriedade se relaciona com o restante da família de transição — transition-property, transition-timing-function e transition-delay.

Como escrever uma duração

Uma duração é um único valor <time>, fornecido em segundos (s) ou milissegundos (ms):

transition-duration: 0.5s;   /* half a second */
transition-duration: 500ms;  /* the same thing */

Algumas regras importantes a saber de antemão:

A unidade é obrigatória. Um número sem unidade como transition-duration: 2 é inválido e toda a declaração é ignorada. Sempre escreva 2s ou 2000ms.
Valores negativos são inválidos. Ao contrário de transition-delay, uma duração não pode ser negativa; o navegador trata uma duração negativa como 0s.
0s significa nenhuma transição visível. Este é o valor padrão, portanto a mudança de propriedade ocorre instantaneamente. Você deve definir uma duração diferente de zero para que a animação seja visível.

Múltiplas durações

Uma ou mais durações separadas por vírgulas podem ser especificadas. Cada duração é aplicada à propriedade correspondente listada em transition-property, que atua como a lista principal:

transition-property: width, background-color;
transition-duration: 2s, 0.5s; /* width animates over 2s, background over 0.5s */

Se houver menos durações do que propriedades, a lista de durações é repetida até preencher a lista. Se houver mais durações do que propriedades, as durações extras são ignoradas:

/* 3 properties, 1 duration → every property uses 1s */
transition-property: width, height, color;
transition-duration: 1s;

Informação

Prefixos de fornecedor (como -webkit-, -moz-, -o-) não são mais necessários para navegadores modernos, pois transition-duration é totalmente suportado em todas as versões atuais.

Valor Inicial	0s
Aplica-se a	Todos os elementos, pseudo-elementos ::before e ::after.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.transitionDuration = "3s";

Sintaxe

Valores de CSS transition-duration

transition-duration: time | initial | inherit;

Exemplo da propriedade transition-duration:

Exemplo de código CSS transition-duration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        width: 150px;
        height: 100px;
        background: #666;
        transition-duration: 2s;
      }
      div:hover {
        width: 600px;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Passe o mouse sobre a caixa cinza: como transition-duration é 2s, a largura cresce suavemente ao longo de dois segundos em vez de mudar instantaneamente.

Exemplo da propriedade transition-duration com o valor "time":

Outro exemplo de código CSS transition-duration

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .example {
        padding: 1em;
        width: 30px;
        height: 30px;
        left: 0;
        background-color: #666;
        position: relative;
        transition-property: background-color, left;
        transition-timing-function: linear, linear;
      }
      .container:hover .example {
        left: 250px;
        background-color: #ccc;
      }
      .el1 {
        transition-duration: .3s, .3s;
      }
      .el2 {
        transition-duration: .6s, .6s;
      }
      .el3 {
        transition-duration: 1s, 1s;
      }
      .el4 {
        transition-duration: 2s, 2s;
      }
    </style>
  </head>
  <body>
    <h2>Transition-duration property example</h2>
    <div class="container">
      <p>
        <code>transition-duration: .3s, .3s;</code>
      </p>
      <div class="example el1"></div>
      <p>
        <code>transition-duration: .6s, .6s;</code>
      </p>
      <div class="example el2"></div>
      <p>
        <code>transition-duration: 1s, 1s;</code>
      </p>
      <div class="example el3"></div>
      <p>
        <code>transition-duration: 2s, 2s;</code>
      </p>
      <div class="example el4"></div>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
time	Especifica quantos segundos ou milissegundos um efeito de transição deve levar para ser concluído. O valor padrão é 0s.
initial	Define esta propriedade com seu valor padrão.
inherit	Herda esta propriedade do elemento pai.

Propriedades relacionadas

transition-duration raramente é usada sozinha. Na prática, você a combina com os outros longhands de transição, geralmente por meio do shorthand transition:

transition-property — quais propriedades CSS são animadas.
transition-timing-function — a curva de aceleração (ease, linear, cubic-bezier).
transition-delay — quanto tempo esperar antes de a transição começar.

Para movimentos em múltiplas etapas que não podem ser expressos como uma única mudança de A para B, use animações CSS.

Prática

Qual afirmação está incorreta sobre a propriedade transition-duration?

Seu valor padrão é 0s.Apenas uma duração pode ser especificada.Pode ser aplicada aos pseudo-elementos ::before e ::after.