Animações CSS

Animações CSS

O CSS pode criar efeitos de animação em elementos HTML sem usar JavaScript ou Flash!

CSS

Nesta seção, você aprenderá sobre os seguintes atributos:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Suporte do navegador para animação

Os números na tabela indicam a primeira versão do navegador que suporta completamente a propriedade.

Property Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

O que é animação CSS?

As animações fazem com que o elemento gradualmente mude de um estilo para outro.

Você pode alterar livremente qualquer número de propriedades CSS.

Para usar animações CSS, você deve primeiro especificar alguns pontos-chave para a animação.

Os pontos-chave contêm o estilo que o elemento possui em um tempo específico.

@keyframes regra

Se você estiver @keyframes As regras especificam o estilo CSS, e a animação gradualmente mudará do estilo atual para o novo estilo no tempo especificado.

Para que a animação funcione, é necessário associá-la a algum elemento.

O exemplo a seguir associa a animação 'example' ao elemento <div>. A animação durará 4 segundos, mudando gradualmente a cor de fundo do <div> de 'red' para 'yellow':

Example

/* Código da animação */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Aplicar efeito de animação a este elemento */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Try It Yourself

Atenção:animation-duration A propriedade define quanto tempo leva para completar a animação. Se não for especificado animation-duration Se a propriedade não for especificada, a animação não ocorrerá, pois o valor padrão é 0s (0 segundos).

No exemplo acima, ao usar os termos 'from' e 'to' (representando 0% (início) e 100% (conclusão)), configuramos quando a mudança de estilo deve ocorrer.

Você também pode usar porcentagens. Ao usar porcentagens, você pode adicionar quantas alterações de estilo precisar.

O exemplo a seguir mudará a cor de fundo do elemento <div> ao completar 25%, 50% e 100% da animação:

Example

/* Código da animação */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Aplicar animação aos elementos */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Try It Yourself

O exemplo a seguir muda a cor de fundo e a posição do elemento <div> quando a animação atingir 25%, 50% e 100%:

Example

/* Código da animação */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Aplicar animação aos elementos */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Try It Yourself

Atrasar a animação

animation-delay A propriedade define o tempo de atraso antes do início da animação.

O exemplo a seguir tem um atraso de 2 segundos antes de começar a animação:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Try It Yourself

Valores negativos também são permitidos. Se usar valores negativos, a animação começará a reproduzir-se como se já tivesse sido reproduzida por N segundos.

No exemplo a seguir, a animação começará a reproduzir-se como se já tivesse sido reproduzida por 2 segundos:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Try It Yourself

Definir o número de vezes que a animação deve ser executada

animation-iteration-count A propriedade especifica o número de vezes que a animação deve ser executada.

O exemplo a seguir executa a animação 3 vezes antes de parar:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Try It Yourself

O exemplo a seguir faz a animação durar para sempre com o valor "infinite":

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Try It Yourself

Reversão ou execução alternada da animação

animation-direction A propriedade especifica se a animação deve ser reproduzida para frente, para trás ou alternadamente.

animation-direction A propriedade aceita os seguintes valores:

  • normal - A animação é reproduzida normalmente (para frente). Valor padrão
  • reverse - A animação é reproduzida na direção oposta (para trás)
  • alternate - A animação é reproduzida primeiro para frente e depois para trás
  • alternate-reverse - A animação é reproduzida primeiro para trás e depois para frente

O exemplo a seguir executa a animação na direção oposta (para trás):

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Try It Yourself

A exemplo, a utilização do valor "alternate" faz a animação rodar primeiro para frente e depois para trás:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Try It Yourself

A exemplo, a utilização do valor "alternate-reverse" faz a animação rodar primeiro para trás e depois para frente:

Example

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Try It Yourself

Especificar a curva de velocidade da animação

animation-timing-function A propriedade define a curva de velocidade da animação.

animation-timing-function A propriedade aceita os seguintes valores:

  • ease - Especifique uma animação que começa mais devagar, acelera e termina mais devagar (padrão)
  • linear - Determine uma animação com a mesma velocidade de início a fim
  • ease-in - Determine uma animação que começa mais devagar
  • ease-out - Determine uma animação que termina mais devagar
  • ease-in-out - Especifique uma animação que começa e termina mais devagar
  • cubic-bezier(n,n,n,n) - Execute os valores que você definiu na função de Bézier de três pontos

Os seguintes exemplos mostram alguns tipos de curvas de velocidade diferentes que podem ser usados:

Example

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Try It Yourself

Especificar o modo de preenchimento da animação

As animações CSS não afetarão o elemento antes da reprodução da primeira chave de frames ou após a reprodução da última chave de frames.animation-fill-mode a propriedade pode sobrepujar esse comportamento.

Quando a animação não estiver sendo reproduzida (antes do início, após o fim, ou ambos os fins),animation-fill-mode A propriedade define o estilo do elemento alvo.

A propriedade animation-fill-mode aceita os seguintes valores:

  • none - Valor padrão. A animação não aplicará nenhum estilo ao elemento antes ou após a execução.
  • forwards - O elemento manterá o valor do estilo definido pela última chave de frames (dependendo de animation-direction e animation-iteration-count).
  • backwards - O elemento receberá o valor do estilo definido pela primeira chave de frames (dependendo de animation-direction) e manterá esse valor durante o atraso da animação.
  • both - A animação seguirá regras tanto para frente quanto para trás, expandindo as propriedades da animação em ambas as direções.

O exemplo a seguir faz com que o elemento <div> mantenha o valor do estilo da última chave de frames no final da animação:

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Try It Yourself

The following example makes the <div> element obtain the style value set by the first keyframe before the animation starts (during the animation delay):

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Try It Yourself

The following example makes the <div> element obtain the style value set by the first keyframe before the animation starts, and retain the style value of the last keyframe at the end of the animation:

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Try It Yourself

Animation Shorthand Properties

The following example uses six animation properties:

Example

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Try It Yourself

Using the shorthand animation The property can also achieve the same animation effect as the previous example:

Example

div {
  animation: example 5s linear 2s infinite alternate;
}

Try It Yourself

CSS Animation Properties

The following table lists the @keyframes rules and all CSS animation properties:

Property Description
@keyframes Define the animation mode.
animation Set a shorthand property for all animation properties.
animation-delay Define the delay before the animation starts.
animation-direction Define whether the animation plays forward, backward, or alternates.
animation-duration Define the time it should take for the animation to complete one cycle.
animation-fill-mode Define the style of the element when the animation is not playing (before start, after end, or both).
animation-iteration-count Define the number of times the animation should play.
animation-name Define the name of the @keyframes animation.
animation-play-state Define se a animação deve ser executada ou pausada.
animation-timing-function Define a curva de velocidade da animação.