Dê vida à sua página com animações CSS

As animações CSS (Folhas de Estilo em Cascata) permitem fazer mais do que apenas alterar suavemente propriedades CSS ao longo do tempo (as transições CSS já fazem isso). Elas também oferecem a capacidade de criar animações complexas usando quadros-chave, bem como um controle mais refinado através de scripts. Geralmente, animações CSS permitem um conteúdo da Web muito mais dinâmico e interessante (por exemplo, dê uma olhada na demonstração de test drive do Beta Fish IE), proporcionando o melhor desempenho de renderização, quando comparado às práticas tradicionais de animação baseadas em JavaScript.

A regra de @keyframe

A principal diferença das animações CSS das transições CSS é a regra @keyframes. Ela permite que você especifique os valores que uma propriedade CSS precisa ter em pontos diferentes durante a animação. Vejamos um exemplo básico.


@keyframes fadeOut {
  from {	
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.TransformDemoDivFadeOut:hover {
  animation-duration: 2s;
  animation-name: fadeOut;
}

Veja a seguir uma captura de tela da página de exemplo. Você também pode ver uma versão dinâmica deste exemplo. Passe o cursor sobre o quadrado (ou toque com o dedo), e o quadrado desaparece lentamente.

Captura de tela de um quadrado amarelo antes da animação

A regra @keyframes, seguida por um identificador que você escolhe, define uma animação. Dentro da regra, você pode definir vários quadros-chave ou pontos durante a animação em que você fornece valores fixos para determinadas propriedades CSS. No exemplo anterior, usamos as palavras-chave from e to para definir os pontos inicial e final de uma animação. Dentro dos quadros-chave, podemos definir nossos valores desejados para diferentes propriedades (no nosso caso, queremos que a opacidade do elemento comece em 1 e anime até 0, efetivamente, esmaecendo o elemento). Como uma alternativa para as palavras-chave from e to, você também pode usar 0% e 100% ao definir os valores de início e fim de suas animações. Se os quadros-chave from (ou 0%) ou to (ou 100%) estiverem ausentes, os valores de estilo normal do elemento serão usados em seu lugar.

Depois que definiu a regra @keyframes no nosso estilo, você aciona a animação definindo a propriedade animation-name no elemento a ser animado. Neste exemplo, você deseja focalizar o elemento a ser animado, portanto, use a :hover pseudoclasse CSS. Além disso, use a propriedade animation-duration para definir a duração da animação.

No exemplo anterior, usamos uma animação CSS para conseguir o mesmo efeito que uma transição CSS (e, de fato, usamos um pouco mais de marcação para fazer isso). Uma das diferenças principais entre as transições e animações CSS é a capacidade de definir os valores desejados para propriedades CSS diferentes em pontos diferentes durante uma animação, considerando que uma transição apenas nos permite especificar os valores inicial e final.

Usando vários quadros-chave para animações sofisticadas

Considere a seguinte regra @keyframes:


@keyframes fadeOutInOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Veja a seguir uma captura de tela da página de exemplo. Você também pode ver uma versão dinâmica deste exemplo. Passe o cursor sobre o quadrado (ou toque com o dedo), e o quadrado desaparece, depois volta a ser exibido e desaparece novamente.

Captura de tela de um quadrado amarelo antes da animação

Ao contrário das transições CSS, você não é forçado a animar em uma direção (do começo ao fim) com animações CSS. Além disso, você não está limitado a animar todas as propriedades desejadas ao mesmo tempo. Vamos ver outro exemplo.


@keyframes fadeOutInOutSwirl {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.5;
    transform: rotateZ(0deg); 
  }
  75% {
    opacity: 0.5;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 1.0;
    transform: rotateZ(360deg);
  }
}

Veja a seguir uma captura de tela da página de exemplo. Você também pode ver uma versão dinâmica deste exemplo. Passe o cursor sobre o quadrado (ou toque com o dedo), e o quadrado esmaece pela metade; gire-o no sentido anti-horário, gire-o novamente no sentido anti-horário, e o quadrado reaparece.

Captura de tela de um quadrado amarelo antes da animação

Observe como a marcação para esse exemplo anima a opacidade do primeiro trimestre da animação (de 0% a 25%) e, em seguida, manipula a opacidade e gira o elemento para o restante da animação. Por meio dessa flexibilidade, as animações CSS permitem gerar conteúdo Web sofisticado, fluido e com recursos eficientes.

Propriedades de animação CSS

A especificação de animações CSS fornece várias propriedades que proporcionam um controle refinado em nosso conteúdo animado.

PropriedadeDescrição

animation

Especifica um valor de taquigrafia que define todas as propriedades de animação (exceto estado de reprodução de animação).

animation-delay

Especifica o deslocamento dentro de uma animação do ciclo (o tempo desde o início de um ciclo) antes que a animação seja exibida. Os valores desta propriedade devem ser em segundos (acrescente "s"—por exemplo, animation-delay: 2s;)

animation-direction

Especifica a direção da reprodução para um ciclo de animação. A definição da direção de animação como "normal" resultará no desempenho esperado da animação (animação de propriedades com valores de 0% a 100%). A definição como "inversa" alcança o efeito oposto. Os valores "alternância" e "alternância inversa" resultam na animação alternando entre os modos "normal" e "inverso" em uma configuração de várias iterações.

animation-duration

Especifica o período de tempo para completar um ciclo de uma animação. Os valores desta propriedade devem ser em segundos (acrescente "s", por exemplo, animation-duration: 2s;)

animation-fill-mode

Especifica se os efeitos de uma animação são visíveis antes ou depois de sua reprodução. Esta propriedade define as propriedades CSS que são aplicadas ao elemento no final de uma animação. Quando definida como "nenhuma" (o valor inicial), um elemento de animação irá retornar para suas propriedades estilísticas originais após a conclusão da animação. A configuração desta propriedade com o valor "encaminha" especifica que os valores finais da animação (aqueles especificados nos quadros-chave "até" ou "100%") são aplicados quando na conclusão.

animation-iteration-count

Especifica o número de vezes que um ciclo de animação é executado. A definição dessa propriedade como "infinita" fará a execução da animação indefinidamente.

animation-name

Especifica um ou mais nomes de animação. O nome da animação identifica (ou seleciona) um CSS na regra  @keyframes.

animation-play-state

Especifica se uma animação está sendo executada ou está em pausa. Esta propriedade permite que você pause uma animação, definindo o valor da propriedade como "em pausa" e a retome definindo-a como "em execução". Esteja ciente que redefinir o estado de reprodução da animação de uma animação concluída como "em execução" não irá reiniciá-la. Para reiniciar uma animação, você deve adicioná-la novamente ao elemento.

animation-timing-function

Especifica se os valores de propriedade intermediários devem ser usados durante um único ciclo de uma animação.

 

A última propriedade definida aqui, animation-timing-function, permite-nos definir uma curva de Bézier que especifica como alteram rapidamente os valores animados. Em uma animação de quadro-chave, esta função é aplicada entre quadros-chave. Além disso, animation-timing-function pode ser usada dentro de uma definição de quadro-chave e, portanto, só se aplica para a transição desse quadro-chave para o próximo.

O Internet Explorer 10 inclui várias definições de função interna (por exemplo, ease, linear, ease-in, ease-out, e assim por diante), bem como uma função cubic-bezier() que permite que você especifique suas próprias funções de tempo.

Vejamos alguns exemplos dessas funções de tempo em ação. Esta página de exemplo tem uma linha de quadrados, cada um com as mesmas animações aplicadas a ele, mas com uma função de tempo diferente. Observe as ligeiras variações de velocidade de cada animação.

Você também pode visitar nossa prática de animações CSS, que permite que você manipule funções de tempo diretamente.

Eventos do JavaScript

O módulo de animações CSS especifica três eventos JavaScript que podem disparar durante a vida útil de uma animação.

EventoDescrição

animationstart

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

animationend

Ocorre quando a animação termina.

animationiteration

Ocorre no final de cada iteração de uma animação. Este evento ocorre somente quando a propriedade animation-iteration-count é definida para um valor maior que 1.

 

Você pode ouvir um evento de animação, assim como escuta outros eventos JavaScript. Veja este exemplo de código:


element.addEventListener(
  "animationstart",
  function () { window.alert("Animation started!") }
);

Este exemplo aciona uma caixa de alerta após o início de uma animação no elemento de destino. As informações contextuais para o evento levam o nome da animação (animationName) e, opcionalmente, uma variável elapsedTime que armazena o tempo decorrido desde o disparo da animação.

Você pode ver uma versão dinâmica deste exemplo. Passe o cursor sobre o quadrado (ou toque com o dedo), e o quadrado desaparece pela metade; gire-o no sentido anti-horário, gire-o novamente no sentido anti-horário, e o quadrado reaparece.

Tópicos relacionados

Para saber mais sobre animações CSS, confira as seguintes fontes de referência:

 

 

Mostrar:
© 2015 Microsoft