Documento sem título

Documento sem título  Documento sem título

Animações

Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

Como vimos anteriormente, para animarmos algo com transition, dependemos de alguma ação do usuário agora e se quisermos algo nesse estilo?

Animação automática

Repare que a animação está acontecendo sozinha de forma contínua, bem semelhante a alguns itens que existem para chamar a atenção como setas indicando que algum ponto é clicável em alguns sites. Para isso ser possível estamos utilizando a propriedade animation.

Para entendermos como fazer a animação do exemplo, precisamos primeiramente entender a ideia de trabalhar com keyframes. Basicamente iremos definir que dado um espaço de tempo entre o começo e o fim do mesmo determinadas propriedades CSS serão aplicadas.

@keyframes voltar {
 0% {
   transform: translateX(200px);
 }
 100% {
   transform: translateX(0);
  }
}

E para associar esses keyframes em um elemento do HTML, precisamos adicionar essa animação voltar, ou qualquer outra, através da propriedade animation:

.quadrado {
   animation: voltar 1s;
}

Porém dessa forma a animação só acontece uma vez, caso tenhamos interesse em fazê-la acontecer de forma infinita podemos adicionar a propriedade animation-iteration-count: infinite; ao invés de infinite, podemos passar um número máximo de vezes que nossa animação irá se repetir, e caso você queria fazer a animação ir e voltar do ponto final para o começo e vice-versa é só adicionar a propriedade animation-direction: alternate;.


Configurando a animação

Para criar uma sequência de animação CSS, você estiliza o elemento que deseja animar com a propriedade animation ou suas sub-propriedades. Isso permite que você configure a sincronização da animação, bem como outros detalhes de como a sequência de animação deveria progredir.

As sub-propriedades da propriedade animation são:

  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • animation-fill-mode


    • animation-delay => especifíca quando uma animação deve começar. Você pode começar a animação no futuro, imediatamente ou desde o início, ou imediatamente e parcialmente através do ciclo de animação.

    Exemplo:

    Texto deslizando com delay de 3 segundos

    Deslizando



    animation-direction => Configura se a animação deve ou nao alternar a direção em cada execução durante a sequência ou voltar ao ponto inicial e se repetir. Pode-se atribuir os valores normal, reverse, alternate e alternate-reverse

    Exemplo:

    Animation-direction com valor normal


    A cada ciclo de animação, a mesma será redefinida para o estado inicial e começará novamente. Este é o valor padrão.





    Animation-direction com valor reverse




    A animação será redefinida para o estado final e começará novamente. As etapas de animação são executadas ao contrário e as funções de tempo também são invertidas.





    Animation-direction com valor alternate




    A animação inverte a direção a cada ciclo, com a primeira iteração sendo reproduzida para a frente.





    Animation-direction com valor alternate-reverse




    A animação inverte a direção a cada ciclo, com a primeira iteração sendo reproduzida ao contrário.




    animation-duration => O tempo de duração da animação. Pode ser especificado usando segundos (s) ou milisegundos (ms). Também podemos usar segundos fracionados, ex: 0.5s.

    Exemplo:

    @keyframes gira {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
      }
    }

    .retangulo {
       background: green;
       width: 50px;
       height: 100px;
       animation-name: gira;
       animation-iteration-count: infinite;
       animation-direction: alternate;
       animation-duration: 650ms;
    }

    Animation-duration com 650ms




    Animation-duration com 3s






    animation-iteration-count => Define quantas vezes essa animação será repetida. Pode ser especificado usando um número qualquer ou o valor infinite

    Exemplo:

    @keyframes gira {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
      }
    }

    .arco {
       width: 100px;
       height: 100px;
       border: dotted 20px #90f2ff;
       border-radius: 50%;
       animation-name: gira;
       animation-duration: 1s;
       animation-iteration-count: 3;
    }

    Animation-iteration-count com 3 repetições

       3x

    Animation-iteration-count com o valor infinite

       infinite



    animation-name => Especifica o nome da regra com chaves @keyframes descrevendo os keyframes da animação.

    animation-play-state => Define se a animação está rodando running, que é o padrão, ou pausada paused.

    animation-timing-function => Controla a velocidade em que a animação irá ocorrer, no espaço de tempo definido pelo duration. Possui algumas palavras-chave já com velocidades mais comuns pré-definidas. São elas:



    Exemplo:

    Documento sem título

    Animação CSS. Site by Elton Rodrigo