Animações

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript dão suporte a animações CSS (Folhas de Estilos em Cascata). As animações CSS permitem criar aplicativos sofisticados e visualmente atraentes com experiências suaves, ágeis e animadas.

As animações CSS são definidas pelo W3C (World Wide Web Consortium) na especificação Animações CSS.

As animações são semelhantes às transições, pois animam elementos conforme eles mudam de posição, tamanho, cor e opacidade; e conforme giram, dimensionam, convertem etc. Assim como com as transições, você pode especificar funções de tempo para controlar a taxa de progressão de uma animação.

No entanto, com as animações CSS3 (Folhas de Estilos em Cascata, Nível 3), você também pode usar quadros-chave, que especificam os valores das propriedades de animação em vários pontos durante a animação. Dessa forma, você pode definir o comportamento de uma animação não apenas no início e no final da animação, mas também durante sua execução. As animações também podem ter iterações e capacidade de direção inversa e podem ter a possibilidade de pausar e continuar.

Como você poderia esperar, as Animações CSS3 oferecem infinitas possibilidades para criar experiências sofisticadas e atraentes. Este tópico fornece uma breve visão geral de como criar uma animação CSS no Internet Explorer 10 e nos aplicativos da Windows Store em JavaScript, além de mostrar um exemplo de animações CSS3 em uso.

As propriedades at-rule e os eventos 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 animação devem ser atualizados apropriadamente.

Para obter uma lista das propriedades CSS que podem ser animadas, veja Propriedades de animação e transição.

Criando uma animação

Você cria uma animação em três etapas básicas:

1. Especificar as propriedades da animação.
2. Criar os quadros chave.
3. Aplicar a animação a um ou mais elementos.

Especificar as propriedades da animação

Primeiro, especifique as propriedades da animação em um seletor que se aplique ao elemento que você deseja animar. As propriedades da animação são descritas nesta seção.

A propriedade animation-name

A propriedade animation-name especifica identificadores de animação (efetivamente, o "nome" que você deu à animação específica). Um identificador de animação seleciona uma regra do arroba CSS @keyframes. Sua sintaxe é mostrada aqui:

PropriedadeDescrição

animation-name

Especifica um ou mais identificadores de animação. Você identifica animações usando a regra do arroba CSS @keyframes.

 

A propriedade animation-duration

A propriedade animation-duration especifica o tempo para concluir um ciclo da animação. Sua sintaxe é mostrada aqui:

PropriedadeDescrição

animation-duration

Indica um ou mais valores de tempo separados por vírgula, cada qual indicando o tempo necessário para um ciclo completo de animação. Cada valor está na forma de um número de ponto flutuante, seguido de um designador de unidade de tempo (ms ou s). Esta propriedade aceita valores negativos.

 

A propriedade animation-timing-function

A propriedade animation-timing-function permite que uma animação mude sua velocidade ao longo de sua duração descrevendo como os valores intermediários da propriedade usados durante um único ciclo da animação são calculados. Para fazer isso, você especifica uma função de intervalo de tempo da animação que se baseia em uma curva de Bézier cúbica, a qual leva quatro parâmetros. Você pode especificar uma função de tempo para a animação inteira ou para quadros chave individuais.

Pode especificar a curva explicitamente usando a função cubic-bezier e inserindo os quatro valores manualmente ou pode escolher dentre diversas palavras-chave de função, cada qual correspondendo a uma função de tempo comumente usada. A sintaxe da propriedade é mostrada aqui:

PropriedadeDescrição

animation-timing-function

Especifica uma ou mais funções de tempo separadas por vírgula que definem os valores intermediários da propriedade usados durante um único ciclo da animação. A animação é calculada em um conjunto de propriedades do objeto correspondente identificadas na regra do arroba CSS @keyframes especificada pela propriedade animation-name. Os valores possíveis são indicados a seguir. Veja na página de referência de animation-timing-function as descrições de cada função.

cubic-bezier(x1,y1,x2,y2)

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 P1 e P2 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 que você crie efeitos de transição "elásticos" ou de "vai-e-volta".

ease

Este é o valor inicial. Essa função de tempo aumenta gradualmente a velocidade no início, anima com velocidade total e depois diminui gradativamente a velocidade no fim.

linear

Esta função de tempo tem uma velocidade uniforme do começo ao fim.

ease-in

Esta função de tempo aumenta gradualmente a velocidade no início.

ease-out

Esta função de tempo diminui gradualmente a velocidade no fim.

ease-in-out

Esta função de tempo aumenta gradualmente a velocidade no início e depois diminui gradualmente a velocidade no fim.

steps

Esta função de tempo define uma função de tempo em níveis e adota dois parâmetros. O primeiro parâmetro especifica o número de intervalos; o segundo parâmetro opcional especifica o ponto no intervalo onde o valor da propriedade é alterado. O segundo parâmetro restringe-se aos valores start ou end, que é o padrão.

 

A propriedade animation-iteration-count

A propriedade animation-iteration-count define o número de vezes que um ciclo de animação é executado. A sintaxe da propriedade é mostrada aqui:

PropriedadeDescrição

animation-iteration-count

Especifica o número de vezes que um ciclo de animação é executado. Múltiplos valores são separados por vírgulas.

<number>

O número de vezes que o ciclo de animação é executado. Você pode especificar um número não inteiro, e a animação terminará em algum ponto durante um ciclo. O valor inicial é "1".

infinite

A animação se repete indefinidamente.

Se um valor negativo ou "0" for especificado, nenhuma animação será aplicada.

Você pode usar a propriedade animation-iteration-count com a propriedade animation-direction definida como alternate, o que faz a animação ser executada em ciclos invertidos ou alternados.

 

A propriedade animation-direction

A propriedade animation-direction especifica a direção de execução de um ciclo de animação. A sintaxe da propriedade é mostrada aqui:

PropriedadeDescrição

animation-direction

Define se a animação deve ser executada em ciclos invertidos ou alternados. Esta propriedade pode ser definida com ou mais dos seguintes valores separados por vírgula:

normal

Este é o valor inicial. Indica que a animação não será executada em ciclos invertidos ou alternados.

reverse

Este valor indica que os ciclos de animação são reproduzidos na direção inversa daquele em que foram especificados.

alternate

Este valor indica que os ciclos de animação alternam entre a execução na direção de avanço (iterações ímpares) e de retrocesso (iterações pares).

alternate-reverse

Este valor indica que os ciclos de animação alternam entre a reprodução na direção inversa (iterações ímpares) e na direção de avanço (iterações pares).

 

A propriedade animation-play-state

A propriedade animation-play-state especifica se uma animação está sendo executada ou pausada. Esta propriedade pode ser útil na criação de um mecanismo para permitir que o usuário pause uma animação. A sintaxe da propriedade é mostrada aqui:

PropriedadeDescrição

animation-play-state

Define se a animação está em execução ou pausa. Esta propriedade pode ser definida com ou mais dos seguintes valores separados por vírgula:

paused

Pausa uma animação em execução. A animação continuará a exibir seu valor atual em estado estático, como se o tempo da animação fosse constante.

running

Continua a executar uma animação em pausa. A animação reinicia a partir do valor atual.

 

A propriedade animation-delay

A propriedade animation-delay define quando uma animação começa e permite que a animação seja iniciada algum tempo depois que é aplicada. Sua sintaxe é mostrada aqui:

PropriedadeDescrição

animation-delay

Especifica um ou mais valores de deslocamento separados por vírgula em uma animação (o tempo a partir do início) antes de ela ser exibida para um conjunto de propriedades de objeto correspondentes. Cada valor está na forma de um número de ponto flutuante, seguido de um designador de unidade de tempo (ms ou s).

  • "0" é o valor inicial e indica que a animação será reproduzida assim que for aplicada.
  • Um valor negativo indica que a animação será executada assim que for aplicada, mas parecerá ter iniciado a execução no deslocamento especificado ou durante seu ciclo de execução.

 

A propriedade animation-fill-mode

A propriedade animation-fill-mode define se os efeitos de uma animação ficam visíveis antes ou depois dela ser executada. Por padrão, uma animação não afeta os valores de propriedades no período entre sua aplicação e sua execução (durante qualquer atraso definido pela propriedade animation-delay). Além disso, por padrão, uma animação não afeta os valores de propriedades depois que é concluída (depois que passa o tempo definido pela propriedade animation-duration). A propriedade animation-fill-mode é usada para substituir esses comportamentos padrão. Sua sintaxe é mostrada aqui:

PropriedadeDescrição

animation-fill-mode

Especifica um ou mais valores separados por vírgula que definem o comportamento da animação fora do tempo em que ela está em execução. Pode ser definida com qualquer um dos seguintes valores:

none

O comportamento padrão fica inalterado.

forwards

O valor final da propriedade (conforme definido no último quadro chave) é mantido depois que a animação é concluída.

backwards

O valor inicial da propriedade (conforme definido no primeiro quadro chave) é aplicado antes da animação ser mostrada, durante o período definido por animation-delay.

both

Tanto o modo de preenchimento de avanço quanto o de retrocesso são aplicados.

 

A propriedade animation

A propriedade abreviada animation combina seis das propriedades de animação em uma única propriedade. Sua sintaxe é mostrada aqui:

PropriedadeDescrição

animation

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

Se você tiver mais de um conjunto dos seis valores de propriedades de animação, deverá separar cada conjunto usando uma vírgula.

 

Considere o seguinte exemplo de código, que define diversas propriedades de animação em um elemento div:


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


Com a propriedade abreviada animation, você pode especificar todas essas seis propriedades em apenas uma linha, assim:


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


Criar os quadros chave

Em seguida, especifique os quadros chave para a sua animação. Os quadros chave permitem que você controle os valores intermediários de uma animação. A regra @keyframes especifica uma lista de quadros chave de animação da propriedade para um objeto, além de um identificador para a animação. Sua sintaxe é mostrada aqui:

RegraDescrição

@keyframes

Uma lista de quadros chave de animação da propriedade para um objeto no documento HTML. Esta regra é usada para especificar valores de propriedades em vários pontos durante uma animação, bem como um identificador para a animação. Especifica os valores das propriedades durante um ciclo de uma animação. (A animação pode iterar uma ou mais vezes.)

Esta regra usa seletores de quadros chave para especificar valores de propriedades em vários estágios da animação. Os seletores de quadro chave podem ser declarados como from (equivalente a 0%), to (equivalente a 100%) e uma ou mais porcentagens.

 

O exemplo a seguir demonstra três seletores de quadro chave, cada qual com dois descritores de quadro chave.


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

Neste exemplo, quadros chave são especificados para três pontos durante a animação: o começo (o valor from ou 0%), 40% e o fim (o valor to ou 100%).

Você também pode especificar a função de tempo a ser usada à medida que a animação se move para o próximo quadro chave. Basta incluir a propriedade animation-timing-function no seletor de quadro chave apropriado.

Aplicar a animação

Por fim, aplique o estilo de animação a um elemento. Em geral, isso é disparado por um evento, como um clique (ou toque) em um botão. Esteja ciente de que uma animação CSS não pode ser interrompida alterando os valores das propriedades de animação, como acontece com as transições. Uma animação CSS só pode ser interrompida usando a propriedade animation-play-state ou adicionando ou removendo o nome da animação.

Quando a animação é concluída, as propriedades animadas retornam a seus valores originais.

Exemplo

O exemplo a seguir mostra uma animação CSS. Ela foi criada usando a demonstração Prática: animações no Test Drive do IE.

Para começar, criaremos um elemento div com texto e aplicaremos alguns estilos a ele:


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<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>


Para ver a aparência desse código, exiba esta página.

Agora, vamos definir alguns parâmetros para a animação. Adicionaremos um seletor à seção style que usa a pseudoclasse :active. Isso significa que a animação só ocorrerá enquanto o usuário mantiver clicado (ou tocar e segurar) o bloco de texto. A animação continuará até terminar.

Para garantir que a animação comece imediatamente, dure 5 segundos, repita uma vez (para uma contagem de iterações total de 2) e seja identificada com o nome "demo", adicionamos o seguinte seletor:


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

Agora vamos criar três quadros chave — um para o começo da animação, um para o meio e um para o fim. Em cada quadro chave, definiremos ambas as propriedades que serão alteradas e funções de tempo para definir a taxa de alteração.


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

Nós definimos duas propriedade para serem animadas, background-color e transform. Ao longo de um único ciclo da animação, a cor da tela de fundo do elemento div é animada de verde-limão (a cor original) para roxo e, depois, azul. O elemento div também é movido para a direita e para baixo por 20 pixels e 30 pixels, respectivamente e depois de volta. A animação usa a função de tempo ease para animar desde o início até o ponto intermediário (o quadro-chave a 50%) e, em seguida, a função de tempo ease-in para animar desde o ponto intermediário até o fim. A animação é repetida uma vez.

Veja esta animação. (O Internet Explorer 10 é necessário.)

Eventos DOM de animações

O Internet Explorer 10 e os aplicativos da Windows Store que usam JavaScript definem três eventos DOM (Document Object Model) de animação:

animationstart

O evento animationstart ocorre no início da animação, considerando qualquer atraso da animação (conforme especificado pela propriedadeanimation-delay), se necessário. Um atraso negativo faz o evento ser acionado com um tempo decorrido igual ao valor absoluto do atraso.

animationend

O evento animationend ocorre quando a animação termina.

animationiteration

O evento animationiteration ocorre no final de cada iteração de uma animação. Esse evento só ocorre quando a propriedade animation-iteration-count é maior que um.

  • Bolhas: sim
  • Cancelável: sim

O exemplo anima um elemento <div> e dispara os eventos animationend, animationend e animationiteration para alterar o texto na caixa. Experimente o exemplo online.


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


Referência de API

Animations

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: animações
Dando vida às páginas com transformações e animações CSS
Beta Fish IE

Postagens no blog do IE

Personalizando com as transições e animações CSS3
Animações de página inteira com CSS
Transformações 3D CSS3 no IE10

Especificação

Animações CSS

Tópicos relacionados

Crie aplicativos interessantes com animações CSS3
Animação CSS3 com fallbacks jQuery

 

 

Mostrar:
© 2014 Microsoft