Transições

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript dão suporte a Transições CSS3 (Folhas de Estilos em Cascata, Nível 3). Com as transições, você pode criar animações simples alterando uniformemente os valores de propriedades CSS ao longo de um tempo especificado. Por exemplo, você pode variar o tamanho e a cor de um objeto ao longo de um período de 10 segundos. O que antes exigia uma combinação complicada de CSS e JavaScript, agora você faz usando apenas CSS. As Transições CSS3 são definidas pelo W3C (World Wide Web Consortium) na especificação do Módulo de Transições CSS Nível 3, que atualmente está no estágio de Versão Preliminar de Trabalho.

Observação  As propriedades e o evento descritos neste tópico antes pediam um prefixo de fornecedor específico da Microsoft, "-ms-", para trabalhar com o Internet Explorer 10 e os aplicativos da Windows Store em JavaScript. Esse prefixo não é mais necessário, mas ainda é reconhecido. Para garantir a compatibilidade no futuro, os aplicativos que usam o prefixo de fornecedor da Microsoft com propriedades de transição devem ser atualizados apropriadamente.
 

Este tópico mostra uma visão geral das propriedades que compõem as transições CSS3, bem como um exemplo simples de transições em uso.

Para obter uma lista das propriedades CSS às quais você pode aplicar transições, veja Propriedades de animação e transição.

A propriedade transition-property

Você usa a propriedade transition-property para identificar um ou mais propriedades CSS às quais os efeitos de transição são aplicados quando um novo valor de propriedade é especificado.

PropriedadeDescrição

transition-property

Indica o nome ou os nomes de propriedades CSS aos quais o efeito de transição é aplicado quando um novo valor de propriedade é especificado. A propriedade transition-property pode ser definida como uma lista separada por vírgula de propriedades CSS ou como um destes valores:

  • none  Nenhum efeito de transição será aplicado quando um novo valor de propriedade for especificado. Todas as propriedades de transição serão ignoradas.
  • all  Este é o valor padrão. Cada propriedade que dê suporte a transições terá o efeito de transição aplicado quando um novo valor for especificado para a propriedade.

 

Além de aplicar transições às propriedades CSS mais básicas, como posicionamento, cor, fontes etc., você também pode aplicar transições a propriedades CSS com suporte recente, como opacity e border-radius, e a transformações 2D e 3D.

Observe que, quando você interrompe uma transição, ela é revertida automaticamente.

A propriedade transition-duration

A propriedade transition-duration define o período de tempo que uma transição demora.

PropriedadeDescrição

transition-duration

Especifica um ou mais valores de tempo separados por vírgula, cada um dos quais indica o período de tempo que uma transição leva do valor antigo para o novo valor. Cada valor está no formato de um número de ponto flutuante, seguido por um designador de unidade de tempo (ms ou s).

 

A propriedade transition-timing-function

A propriedade transition-timing-function permite que uma transição mude sua velocidade ao longo de sua duração descrevendo como os valores intermediários usados durante uma transição são calculados. Para fazer isso, você especifica uma função de tempo da animação que se baseia em uma curva de Bézier cúbica, a qual leva quatro parâmetros.

Há duas possibilidades: especificar a curva explicitamente usando a função cubic-bezier e inserindo os quatro valores manualmente ou escolher entre várias palavras-chave de função, cada uma das quais corresponde a uma função de intervalo de tempo de uso comum.

PropriedadeDescrição

transition-timing-function

Especifica uma ou mais funções de tempo separadas por vírgula que definem os valores intermediários de propriedades usados durante uma transição em um conjunto de propriedades de objeto correspondentes. Os valores possíveis são indicados a seguir. Veja na página de referência de transition-timing-function as descrições de cada função.

  • cubic-bezier(x₁,y₁,x₂,y)  Os quatro parâmetros desta função devem ser valores de ponto flutuante entre 0 e 1, inclusive. Os valores correspondem às coordenadas x e y dos pontos P₁ e P₂ da curva de Bézier cúbica. Para outras propriedades que não opacity e color, a função de curva cubic-bezier aceita coordenadas y fora do intervalo padrão entre 0 e 1. Isso permite criar efeitos de transição de "elástico" ou "salto".
  • ease  Este é o valor padrão. Esta função de intervalo de tempo aumenta de velocidade gradualmente no início, gera uma animação a plena velocidade e depois diminui de velocidade gradualmente no fim.
  • linear  Esta função de intervalo de tempo tem uma velocidade consistente do início ao fim.
  • ease-in  Esta função de intervalo de tempo aumenta de velocidade gradualmente no início.
  • ease-out  Esta função de intervalo de tempo diminui de velocidade gradualmente no fim.
  • ease-in-out  Esta função de intervalo de tempo aumenta de velocidade gradualmente no início e depois diminui de velocidade gradualmente no fim.
  • steps  Esta função de intervalo de tempo define uma função de intervalo de tempo escalonada e leva dois parâmetros. O primeiro parâmetro especifica o número de intervalos; o segundo parâmetro, opcional, especifica o ponto do intervalo em que o valor da propriedade muda. O segundo parâmetro restringe-se aos valores start ou end, que é o padrão.

 

A propriedade transition-delay

A propriedade transition-delay permite que você atrase o início de uma transição ou a faça aparecer como se a transição já estivesse em andamento. Se o valor da propriedade transition-delay é negativo, a transição é executada assim que é aplicada, mas parece que a execução começou no deslocamento especificado ou durante o ciclo de execução.

PropriedadeDescrição

transition-delay

Especifica um ou mais valores de deslocamento separados por vírgula dentro de uma transição (a quantidade de tempo a partir do início de uma transição) antes que a transição seja exibida para um conjunto de propriedades de objeto correspondentes. Cada valor está no formato de um número de ponto flutuante, seguido por um designador de unidade de tempo (ms ou s).

 

A propriedade transition

A propriedade abreviada transition combina as quatro propriedades transition descritas antes em uma única propriedade.

PropriedadeDescrição

transition

Especifica um ou mais conjuntos de propriedades de transição delimitadas por espaços para um conjunto de propriedades de objeto correspondentes. Os valores das propriedades de transição devem ser definidos na seguinte ordem:

Se tiver mais de um conjunto dos quatro valores das propriedades de transição, separe cada conjunto usando uma vírgula.

 

Exemplo

Para ver transições CSS3 em ação, consulte Prática: transições no Test Drive do IE.

O exemplo simples a seguir mostra como usar transições CSS3 para variar uma propriedade CSS aplicada a um elemento div ao longo do tempo.

Primeiro, vamos criar um elemento div que contenha um texto e aplicar alguns estilos a ele:


<!DOCTYPE html>
<html lang="en-us">

<head>
<style type="text/css">
body {
  padding: 10px;
  font: bold 20pt "Segoe UI";
}
div {
  width: 250px;
  background-color: lime;
  padding: 10px;
}
</style>
</head>

<body>

<div>
  Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor.
  Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.</div>

</body>

</html>


Exibir esta página.

Vamos fazer o div desaparecer lentamente com o tempo, variando a propriedade opacity quando o usuário clica e segura (ou toca e segura) no div. Primeiro vamos definir os valores de "antes" e "depois" da propriedade opacity. Vamos atribuir ao div a opacidade "1" para começar e "0" quando o div está "ativo". Para conseguir isso, vamos adicionar propriedades opacity de modo que a seção style fique assim:


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


Agora, quando você clicar e segurar (ou pressionar e segurar) no div verde, ele desaparecerá imediatamente, pelo tempo que você clicar no mouse (ou mantiver o dedo pressionado). Exibir esta página.

Agora podemos adicionar propriedades de transições CSS para fazer com que a opacidade diminua gradualmente. Primeiro, identificamos a propriedade para a transição usando a propriedade transition-property:


transition-property: opacity;

Depois, adicionamos uma duração à transição usando a propriedade transition-duration:


transition-duration: 5s;

Agora, vamos definir a função de tempo a ser usada com a propriedade transition-timing-function. Para aplicar uma transição uniforme ao div, usamos a função de tempo linear:


transition-timing-function: linear;

Também podemos atrasar a transição por um segundo usando a propriedade transition-delay:


transition-delay: 1s;

Essas quatro propriedades farão com que a propriedade opacity sofra uma transição uniforme por 5 segundos após 1 segundo. Também é possível usar a propriedade abreviada de transição para combinar as quatro propriedades:


transition: opacity 5s linear 1s;

Exibir esta página.

Para aplicar uma transição a mais de uma propriedade de um elemento, defina as propriedades de transição como vários valores separados por vírgula. Por exemplo, podemos adicionar uma mudança de cor ao exemplo anterior. Primeiro, adicione uma propriedade background-color ao seletor div :active. Depois, mude a propriedade transition assim:


transition: opacity 5s linear 1s, background-color 2s ease;

Essa propriedade adiciona uma transição de cor para roxo ao longo de dois segundos usando a função de intervalo de tempo ease. Não há nenhum valor de atraso, por isso a transição começa imediatamente. Exibir esta página.

Eventos de Transições DOM

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript definem dois eventos de transição:

transitionstart

O evento transitionstart ocorre no início da transição.

transitionend

O evento transitionend ocorre quando a transição é concluída. Se a transição for removida antes da conclusão, o evento não será acionado.

Este exemplo aplica transições a um elemento <div> e aciona os eventos transitionstart e transitionend para alterar o texto na caixa. Experimente o exemplo online.


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


Referência de API

Transitions

Amostras e tutoriais

Como dar vida à sua página da Web com transformações, transições e animações CSS

Demonstrações do Test Drive do Internet Explorer

Prática: transições
Transformações 3D CSS3 no IE10
Dando vida às páginas com transformações e animações CSS

Postagens no blog do IE

Animações de página inteira com CSS
Personalizando com as transições e animações CSS3

Especificação

Transições CSS

Tópicos relacionados

Aplicativos elegantes com transições CSS3

 

 

Mostrar: