CSS animation – introdução a animações CSS

Hoje muitos sites utilizam animações, seja em forma de GIFs, SVGs, WebGL, video background entre outros. As animações quando utilizadas corretamente, podem ajudar a dar vida e interatividade a um website, além de otimizar a experiência do usuário. Neste tutorial vamos fazer uma introdução as animações CSS.

Este post faz parte do projeto que participo de tradução dos artigos dos blogs da Envato, Webdesigntuts+, Gamedevelopmenttuts+ e Nettuts+.

Link para artigo original: A Beginner’s Introduction to CSS Animation
Autor do artigo original: Catalin Miron
Link da envato para o artigo traduzido: Introdução a Animações CSS


Neste tutorial vamos fazer uma introdução a animações CSS; esta é a melhor maneira que temos atualmente para animar elementos em uma página web, além de estar cada vez mais popular conforme aumenta seu suporte nos navegadores. Após analisar os pontos básicos das animações CSS, vamos criar um exemplo de animação onde vamos transformar um quadrado em um círculo:

Introdução a @keyframes e Animation

O principal componente de animações CSS é o chamado @keyframes, resonsável pelas regras da animação criada. Pense no @keyframes como etapas de uma timeline. Dentro dos @keyframes você pode definir essas etapas, que podem ter diferentes declarações de estilo.

Para que animação CSS funcione, você precisa linkar o @keyframe a um seletor. Isso faz com que os @keyframes alterem gradativamente os estilos com base nos estágios configurados.

Configurando os @keyframes

Vamos configurar os estágios da animação. As propriedades do nosso @keyframes são:

  • Nome de sua escolha (neste exemplo vamos utilizar o nome tutsFade).
  • Stages: 0%-100%; from (equal to 0%) and to (equal to 100%).
  • estilos CSS: o estilo que você deseja aplicar para cada estágio.

Exemplo:

 @keyframes tutsFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

ou:

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

ou com shortcode:

 @keyframes tutsFade {
  to {
    opacity: 0;
  }
}

O exemplo acima vai aplicar uma transição na opacidade (opacity) do elemento, de opacity: 1 para opacity: 0. Todos os exemplos acima executam a mesma função e geram o mesmo resultado.


A propriedade Animation

A propriedade animation é utilizada para apontar os @keyframes a um seletor CSS. O recurso animation possui várias propriedades:

  • animation-name: nome do @keyframes (lembre-se que escolhemos tutsFade).
  • animation-duration: O tempo de duração, o tempo total de execução da animação do início ao fim.
  • animation-timing-function: velocidade com que a animação é executada ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay: o delay para iniciar a animação.
  • animation-iteration-count: quantas vezes a animação será executada.
  • animation-direction: esta propriedade te da a possibilidade de mudar a forma como a animação é executada, exemplo: do começo ao fim, do fim ao começo.
  • animation-fill-mode: determina qual estilo será aplicado ao término da animação ( none | forwards | backwards | both )

Exemplo:

 .element {
  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

Ou com shortcode:

 .element {
  animation: tutsFade 4s 1s infinite linear alternate;
}

O código acima faz com que seja gerado um efeito de piscar (blink), com 1 segundo de delay para iniciar a animação (animation-delay), 4 segundos de duração com a direção (animation-direction) alternada e looping infinito linear nas interações (animation-iteration-count: infinite; / animation-direction: alternate;).

Adicionando prefixos CSS (CSS Vendor Prefix)

É recomendado que utilizemos os prefixos CSS de cada navegador para um melhor suporte as animações. Os prefixos padrões para os principais navegadores são:

  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-

Abaixo um exemplo da propriedade animation com os prefixos CSS de outros navegadores devidamente declarados:

 .element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}

Exemplo com @keyframes:

 @-webkit-keyframes tutsFade { /* seu estilo */ }
@-moz-keyframes tutsFade { /* seu estilo */ }
@-ms-keyframes tutsFade { /* seu estilo */ }
@-o-keyframes tutsFade { /* seu estilo */ }
@keyframes tutsFade { /* seu estilo */ }

Para ajudar na leitura e entendimento do tutorial vou continuar a apresentar os exemplos sem utilizar os prefixos de outros navegador, mas a versão final dos exemplos incluem os prefixos e é bom que você tenha essa prática em mente sempre que for trabalhar com propriedades CSS.

Para maiores informações sobre prefixos CSS acesse http://css3please.com/.


Múltiplas animações

Você pode gerar múltiplas animações utilizando uma vírgula para separar as declarações. Vamos adicionar uma rotação adicional no nosso elemento tutsFade. Para isso declaramos @keyframes extras e direcionamos ao elemento em questão, como no exemplo abaixo:

 .element {
  animation: tutsFade 4s 1s infinite linear alternate,
             tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
  to {
    opacity: 0;
  }
}
@keyframes tutsRotate {
  to {
    transform: rotate(180deg);
  }
}

Tutorial – transformando um quadrado em um círculo

Vamos analisar um exemplo mais dinâmico transformamdo um quadrado em um círculo utilizando animações com alguns parâmetros. Nós precisamos de cinco estágios no total e para cada estágio nós vamos definir um valor diferente de border-radius, rotation e background-color. Vamos então criar o exemplo proposto.

Elemento básico

Primeiro vamos criar a marcação do elemento que vamos animar. Não vamos utilizar classes por enquanto, vamos utilizar um seletor para aplicar os estilos ao elemento DIV:

 class="brush: html"><div></div>

Depois adicionamos o seguinte estilo para o elemento div:

 div {
  width: 200px;
  height: 200px;
  background-color: coral;
}

Declarando os Keyframes

Agora vamos criar os @keyframes. Seu nome vai ser square-to-circle, com cinco estágios:

 @keyframes square-to-circle {
  0%{}
  25%{}
  50%{}
  75%{}
  100%{}
}

Vamos precisar definir alguns estilos com base nos estágios, então vamos começar declarando o border-radius para cada lado do quadrado, conforme exemplo abaixo:

 @-webkit-keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
  }
  25%  {
    border-radius:50% 0 0 0;
  }
  50%  {
    border-radius:50% 50% 0 0;
  }
  75%  {
    border-radius:50% 50% 50% 0;
  }
  100% {
    border-radius:50%;
  }
}

Vamos declarar também um background-color diferente para cada estágio:

 @keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
  }
}


Para realmente fixar os exemplos, vamos um pouco além do border-radius e background-color.

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

Aplicando a animação

Após definir a animação de transformar o quadrado em círculo, vamos aplicar ela ao elemento DIV:

div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite alternate;
}

Abaixo exemplificamos o shortcode utilizado para as propriedades do exemplo acima:

  • O atributo animation-name é square-to-circle.
  • O atributo animation-duration é 2s.
  • O atributo animation-delay é 1s.
  • O atributo animation-iteration-count é infinite, significa que a animação vai ser executada sem limite de repetição.
  • E o atributo animation-direction é alternate, que significa que a animação vai ser executada do início ao fim, depois do fim ao início e assim por diante.


Utilizando a função de tempo (animation-timing-function)

Agora só nos resta analisar a propriedade de animação para tempo, chamada animation-timing-function. Ela define a velocidade, aceleração e desaceleração do movimento configurado. Essa função pode ter valores bem detalhados e pode ser um pouco confuso tentar declarar suas propriedades, mas existem diversas ferramentas na internet que podem ajudar na configuração do timing das animações.

Uma dessas ferramentas é o CSS Easing Animation Tool. Vamos utilizá-lo para calcular o tempo da nossa animação.

Gostaria de aplicar um efeito de elasticidade na nossa animação.

CSS easign tool - CSS animation – introdução a animações CSS - Web Social Dev

Testando a ferramenta geramos o código abaixo, para utilizar basta atualizar a propriedade timing-function com código gerado.

 div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  
}

No fim, nosso código ficou da seguinte forma (sem inclusão de prefixos css de outros navegadores -webkit- , -moz-, -ms-, -o-):

 div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}

@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  {
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

Antes de finalizar, um adendo

Animações CSS operam muito bem em navegadores modernos, porém o Firefox tem um método de renderização para animações um pouco estranho. Analise as linhas do exemplo abaixo para entender melhor:

Firefox example - CSS animation – introdução a animações CSS - Web Social Dev

Existe um fallback para suprir esta necessidade, basta configurar na DIV um seletor com a propriedade outline conforme o exemplo abaixo e o Firefox deve renderizar os objetos normalmente.

 outline: 1px solid transparent;


Conclusão

É isso, neste post fizemos uma breve introdução a animações CSS e criamos uma animação simples em repetição.

Suporte dos Navegadores a animações CSS

Para mais informações (atualizadas) sobre os recursos suportados pelos principais navegadores, acesse Can I use... Os principais navegadores tem suporte ao recurso a partir das versões Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+.

Recursos citados: