Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

Introdução a Animações CSS

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

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 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:

ou:

ou com shortcode:

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:

Ou com shortcode:

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:

Exemplo com @keyframes:

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:

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:

Depois adicionamos o seguinte estilo para o elemento div:

Declarando os Keyframes

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

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:

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

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

Aplicando a animação

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

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.

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

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

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:

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.

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:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.