HTML5 - Adicionar personalidade com transições e animações de CSS3

Artigo
02/04/2013

Ted Johnson

Gerente líder de programa para elementos gráficos, Internet Explorer

Avanços como JavaScript compilado de alto desempenho e renderização de HTML5 e CSS3 acelerada por hardware no Internet Explorer 9 e 10 permitem que desenvolvedores Web criem experiências cada vez mais ricas Dois recursos relacionados, transições de CSS3 e animações de CSS3, dão a desenvolvedores Web uma forma declarativa de adicionarem personalidade a interações de página da Web facilmente.

Esta postagem de blog descreve esses dois recursos como implementados no IE10 no Windows Developer Preview e em aplicativos estilo Metro Windows 8 escritos em HTML.

Mesma marcação—exceto pelo prefixo do fornecedor

Como quase todos os recursos novos no IE9 e IE10, transições e animações de CSS3 são recursos baseados em padrões implementados com interoperabilidade "de mesma marcação" em mente. Contudo, diferentemente de recursos como raio de borda, sombra de caixa e de texto, que são partes de especificações estáveis do W3C, transições e animações estão na fase de especificação em que fornecedores prefixam suas implementações. Portanto, neste caso, "mesma marcação" deve ser qualificada como "mesma marcação exceto pelo prefixo do fornecedor".

Muitos outros autores escreveram sobre esses recursos, inclusive o excelente artigo de Rich Bradshaw: Utilização de transições, transformações e animações de CSS3. Muitos artigos que discutem esses recursos usam apenas o prefixo -webkit- em seus exemplos. Usuários que desejarem fazer experiências em outros navegadores precisam copiar o exemplo e alterar -webkit- para -ms-, -moz- ou -o-, como apropriado. Os exemplos de Bradshaw são uma exceção; eles já funcionam no IE10!

Transições

A função de transições de CSS3 é bastante direta: mudar suavemente o valor computado da propriedade CSS do antigo para o novo. Além disso, alterações no valor resultantes de alterações na classe ou pseudoclasse CSS do elemento também disparam transições.

Considere a marcação a seguir:

    img {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 2s;
    transition-delay: 0s;
    transition-timing-function: linear;
    }
    img:hover {
    opacity: 0;
    }

O efeito disso é que, quando o usuário move o mouse sobre a imagem, a imagem desaparece suavemente em 2 segundos começando imediatamente, como ilustrado abaixo (eu incluí uma sombra em um elemento de envolvimento para ilustrar o desfecho).

JJ944012.61FADF26C76393D31CD66164301D097E(pt-br,MSDN.10).png

Esmaecimento total de uma imagem em 2 segundos

As propriedades de transição que fazem isso ocorrer são:

transition-property – especifica que propriedades de CSS devem sofrer transição. A palavra-chave "all" faz com que todas as propriedades animáveis façam a transição quando alteradas. O valor padrão é “all”.
transition-duration – o tempo, em segundos ou milésimos de segundo, da transição, começando após o transition-delay. O valor padrão é zero, significando que a transição é imediata.
transition-delay – o tempo, em segundos ou milésimos de segundo, para a transição começar após a mudança do valor . O tempo pode ser negativo, caso em que a transição começa em parte de sua duração. O valor padrão é zero.
transition-timing-function – descreve com os valores imediatos de uma transição são calculados. Isso permite que uma transição mude de velocidade ao longo de sua duração. A função subjacente é uma curva de Bezier cúbica; palavras-chave correspondem a funções comuns. O valor padrão é a palavra-chave “ease,” uma função que começa rápido e vai reduzindo a velocidade até o final.

Fazer uma imagem desaparecer é um simples exemplo. Digamos que quiséssemos fazer uma imagem desaparecer em outra, como ilustrado abaixo.

JJ944012.7146E5BA6F777B1C921254F9A35365A7(pt-br,MSDN.10).png

Esmaecimento de uma imagem para outra em 2 segundos

A marcação a seguir consegue isso (só que os prefixos do fornecedor devem preceder todas as propriedades de transição).

Fragmento de HTML

<div id="imageWrapper">
<img id="backImage" src="imageB.jpg" /><img id="frontImage" src="imageA.jpg" />
</div>

Fragmento de CSS

    #imageWrapper {
    display: inline-block;
    width: 400px;
    height: 267px;
    box-shadow: 2px 2px 5px 0px gray;
    position: relative;
    }
    #imageWrapper img {
    width: 400px;
    height: 267px;
    position: absolute;
    transition-property: opacity;
    transition-duration: 2s;
    transition-timing-function: linear;
    }
    #imageWrapper #frontImage, #imageWrapper:hover #backImage {
    opacity: 1;
    }
    #imageWrapper:hover #frontImage, #imageWrapper #backImage {
    opacity: 0;
    }

Existe uma versão funcional da marcação acima:

JJ944012.D33B2EFD4816F385C853D94C9E4DFE1D(pt-br,MSDN.10).png

JJ944012.F79AE6491A771B88263E287AFCB9370D(pt-br,MSDN.10).png

Mova cursor sobre a imagem para fazê-la desparecer para outra.
Transições de CSS3 são suportadas por seu navegador com transition.

Transições simples, como a acima, são moderadamente fáceis de simular em JavaScript. Os benefícios das transições de CSS são suas definições declarativas, que as tornam mais fáceis que scripts. Como a execução — pelo menos no IE10 — é feita de forma assíncrona para o thread de processamento principal, as transições são mais suaves e os sites mais ágeis na resposta.

Uma demonstração interativa de transições de CSS3 está disponível no site do test-drive do IE. A demonstração funciona em todos os navegadores que suportarem transições de CSS3, inclusive o IE10 no WindowsDeveloper Preview.

Animações

Animações de CSS3 são similares a transições de CSS3 no sentido de que animam suavemente um valor de CSS ao longo do tempo. As diferenças são (a) como se especificam as propriedades para animação, (b) como se dispara a animação e (c) a complexidade da animação possível.

Você define animações usando uma função "keyframes". Uma regra de keyframes simples que combina o comportamento de esmaecimento da transição acima seria:

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

Aplicamos isso a nossa imagem com esta CSS:

    img {
    animation-duration: 2s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    }
    img:hover {
    animation-name: fadeOut;
    }

Muitas dessas propriedades são quando se fala em transições. As novas são:

animation-fill-mode – o valor “forwards” desta propriedade significa manter os valores de propriedade "to" do final da animação avançando no tempo. O valor padrão desta propriedade é “none,” o que faz com que as propriedades voltem a seus valores não animados ao final da animação. (É possível se construir a CSS acima sem usar animation-fill-mode. Simplesmente inclua “opacity: 0;” na regra img:hover para manter a opacidade final em 0.)
animation-name – definir a propriedade animation-name dispara a animação. Quando a propriedade animation-name é definida, a contagem regressiva de animation-delay começa. Quando animation-delay chega a zero, a animação começa e continua ao longo de animation-duration. animation-timing-function se comporta da mesma forma que transition-timing-function descrita acima.

O poder de animações do CSS3 está na capacidade de se especificarem múltiplos keyframes com propriedades e valores intermediários que não precisam ficar dentro dos limites dos valores de início e fim em transições do CSS3, valores intermediários sempre avançam do início para o fim; nunca saem dessa faixa. Animações não têm essa restrição.

Isso possibilita programar um “ricochete” como mostrado na marcação e no exemplo abaixo.

    #bouncingImage {
       width: 400px;
       height: 267px;
       box-shadow: 2px 2px 5px 0px gray;
       animation-duration: 2s;
       animation-timing-function: ease-in-out;
       animation-fill-mode: forwards;
    }
    #bouncingImage:hover {
    animation-name: zoomInBounce;
    }
     
    @keyframes zoomInBounce {
       from {
       transform: scale(1);
       }
       30% {
       transform: scale(1,4);
       }
       40% {
       transform: scale(1,15);
       }
       50% {
       transform: scale(1,35);
       }
       60% {
       transform: scale(1,2);
       }
       70% {
       transform: scale(1,3);
       }
       80% {
       transform: scale(1,225);
       }
       90% {
       transform: scale(1,275);
       }
       to {
       transform: scale(1,25);
       }
    }

JJ944012.F79AE6491A771B88263E287AFCB9370D(pt-br,MSDN.10).png

Mova cursor sobre a imagem para ampliá-la com um efeito de ricochete.
Animações de CSS3 são suportadas por seu navegador com animation.

Uma demonstração interativa de animações de CSS3 está disponível no site do test-drive do IE . A demonstração funciona em todos os navegadores que suportarem animações de CSS3, inclusive o IE10 no WindowsDeveloper Preview.

Criação da personalidade de seu site

Os dois exemplos compartilhados nesta postagem provavelmente são coisas que você adotaria em seu site. Contudo, transições e animações bem projetadas estão se tornando uma parte esperada de uma experiência Web moderna. O estilo Metro do Windows 8 usa animações fluidas e sutis extensivamente para ajudar os usuários a entenderem melhor suas interações com o sistema. Ela literalmente faz com que os aplicativos Windows 8 estilo Metro fiquem mais reativos ao toque.

Esperamos que os exemplos aqui, as demonstrações do test-drive do IE e o número crescente de artigos e exemplos em outros pontos da Web ajudam você a explorar essa nova tecnologia e a adicionar personalidade a seu site.

| Home | Artigos Técnicos | Comunidade