Introdução a CSS animations

Introdução a CSS animations

Na construção de um site ou sistema a interação entre usuário e interface tem tido um valor cada vez maior, animações quando bem construídas com elementos de design proporcionam excelentes experiências para o usuário.

Uma animação pode fazer a experiência do usuário ser totalmente diferente, animações podem ser usadas para dar foco e destaque a uma parte do sistema, chamar a atenção do usuário ou até mesmo “ensinar” como o usuário deve interagir com a interface.

Vamos dar uma olhada em algumas partes básicas de uma animação construída em CSS.

Fundamentos da CSS Animations

Exitem dois aspectos principais na construção de CSS Animations. O mais importante são as regras @keyframes. Uma keyframe define quais mudanças o elemento vai sofre em uma determinada animação, ela define como o elemento deve estar em cada etapa da animação.

No exemplo abaixo vamos construir uma caixa utilizando o elemento “div” e vamos construir uma regra utilizando keyframe para definir as mudanças que o elemento irá sofrer no decorrer da animação.

Para que ocorra alguma animação devemos criar a keyframe e liga-la a classe css. Todo keyframe deve ter um nome, em nosso exemplo chamaremos de “animateBox“. Depois temos que definir as alterações que vão de 0% a 100%, sendo estas percentagens da taxa de mudança. Veja como fica abaixo.

Neste momento a div ainda não esta animada, pois não existe ligação entre a regra keyframe e a classe da div, antes de ligarmos o keyframe a classe vamos verificar algumas propriedades da animação.

Propriedades da CSS Animations

Para ligar o keyframe em alguma classe devemos utilizar algumas propriedades:

  • animation-name: @keyframes (nome): define o nome do keyframe a ser associado a classe
  • animation-duration: período de tempo ou duração total que a animação vai ter de 0% a 100%
  • animation-timing-function: define a velocidade da animação
  • animation-iteration-count: quantidade de vezes que ocorrerá a animação
  • animation-direction: capacidade de mudar a direção do looping da animação
  • animation-fill-mode: especifica quais estilos serão aplicados no elemento

O código a seguir inclui algumas dessas propriedades animation para o elemento. Um deles é o animation-name, que liga o elemento e define a animação. A outra é a animation-duration que se correlaciona diretamente de volta para a taxa de percentagens de mudança. Por último, a animation-iteration-count é quantas vezes a animação vai ocorrer.

Veja o resultado final deste simples exemplo:

See the Pen OREjyK by Valdir Viana (@valdirviana) on CodePen.

Conclusão

Construímos um pequeno exemplo do uso das CSS Animations, você pode verificar no site da mozilla mais informações sobre CSS Animations.

Espero que tenham gostado e até a próxima.

Related Posts