Animações CSS

Índice

Mostrar índice

Animações CSS

CSS permite animação de elementos HTML sem usar JavaScript ou Flash!

CSS

Neste capítulo você aprenderá sobre as seguintes propriedades:

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

Suporte do navegador para animações

Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.

Property
@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 são animações CSS?

Uma animação permite que um elemento mude gradualmente de um estilo para outro.

Você pode alterar quantas propriedades CSS quiser, quantas vezes quiser.

Para usar animação CSS, você deve primeiro especificar alguns quadros-chave para o animação.

Os quadros-chave contêm quais estilos o elemento terá em determinados momentos.

A regra @keyframes

Quando você especifica estilos CSS dentro de @keyframes regra, a animação mudará gradualmente do estilo atual para o novo estilo em determinados momentos.

Para que uma animação funcione, você deve vinculá-la a um elemento.

O exemplo a seguir vincula a animação "exemplo" ao elemento <div>. A animação durará 4 segundos e mudará gradualmente o cor de fundo do elemento <div> de "vermelho" para "amarelo":

Exemplo

/* The animation code */
@keyframes example {
  from {background-color: red;}
   
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  
background-color: red;	animation-name: example;
  animation-duration: 4s;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Observação: a propriedade animation-duration define quanto tempo uma animação deve levar para ser concluída. Se a propriedade animation-duration não for especificada, nenhuma animação ocorrerá, porque o valor padrão é 0s (0 segundos).

No exemplo acima especificamos quando o estilo será alterado usando as palavras-chave “de” e “para” (que representa 0% (início) e 100% (concluído)).

Também é possível usar porcentagem. Usando porcentagem, você pode adicionar quantos o estilo muda conforme você quiser.

O exemplo a seguir mudará a cor de fundo do <div> elemento quando a animação estiver 25% concluída, 50% concluída e novamente quando a animação estiver 100% concluída:

Exemplo

/* The animation code */
@keyframes example
{
  0%   {background-color: red;}
   
25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

O exemplo a seguir mudará a cor de fundo e a posição do <div> elemento quando a animação estiver 25% concluída, 50% concluída e novamente quando a animação estiver 100% concluída:

Exemplo

/* The animation code */
@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;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

Atrasar uma animação

A propriedade animation-delay especifica um atraso para o início de uma animação.

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

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>

Valores negativos também são permitidos. Se estiver usando valores negativos, a animação começará como se já estivesse tocando há N segundos.

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

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>

Defina quantas vezes uma animação deve ser executada

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

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

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>

O exemplo a seguir usa o valor "infinito" para tornar a animação continuar para sempre:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

Execute a animação na direção reversa ou em ciclos alternativos

A propriedade animation-direction especifica se uma animação deve ser reproduzida para frente, para trás ou em alternância ciclos.

A propriedade Animation-Direction pode ter os seguintes valores:

normal: - A animação é reproduzida normalmente (avança). Este é o padrão
reverse: - A animação é reproduzida na direção reversa (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 executará a animação na direção reversa (para trás):

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>

O exemplo a seguir usa o valor "alternativo" para tornar a animação corra primeiro para frente e depois para trás:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>

O exemplo a seguir usa o valor "alternate-reverse" para tornar a animação corra primeiro para trás e depois para frente:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>

Especifique a curva de velocidade da animação

A propriedade animation-timing-function especifica a curva de velocidade do animação.

A propriedade Animation-Timing-Function pode ter os seguintes valores:

ease: - Especifica uma animação com início lento, depois rápido e final lento (este é o padrão)
linear: - Especifica uma animação com a mesma velocidade do início ao fim
ease-in: - Especifica uma animação com início lento
ease-out: - Especifica uma animação com final lento
ease-in-out: - Especifica uma animação com início e fim lentos
cubic-bezier(n,n,n,n): - Permite definir seus próprios valores em uma função cúbica-bezier

O exemplo a seguir mostra algumas das diferentes curvas de velocidade que podem ser usadas:

Exemplo

#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;}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

#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;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Especifique o modo de preenchimento para uma animação

As animações CSS não afetam um elemento antes da reprodução do primeiro quadro-chave ou após a reprodução do último quadro-chave. A propriedade Animation-Fill-Mode pode substituir esse comportamento.

A propriedade animation-fill-mode especifica um estilo para o elemento de destino quando a animação não está sendo reproduzida (antes de começa, depois de terminar, ou ambos).

A propriedade Animation-fill-mode pode ter os seguintes valores:

none: - Valor padrão. A animação não aplicará nenhum estilo ao elemento antes ou depois de ser executada
forwards: - O elemento manterá os valores de estilo definidos pelo último quadro-chave (depende da direção da animação e da contagem de iterações da animação)
backwards: - O elemento obterá os valores de estilo definidos pelo primeiro quadro-chave (depende da direção da animação) e os manterá durante o período de atraso da animação
both: - A animação seguirá as regras tanto para frente quanto para trás, estendendo as propriedades da animação em ambas as direções

O exemplo a seguir permite que o elemento <div> retenha os valores de estilo do último quadro-chave quando a animação termina:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

O exemplo a seguir permite que o elemento <div> obtenha os valores de estilo definidos pelo primeiro quadro-chave antes do início da animação (durante o período de atraso da animação):

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>

O exemplo a seguir permite que o elemento <div> obtenha os valores de estilo definidos pelo primeiro quadro-chave antes do início da animação e retém os valores de estilo do último quadro-chave quando a animação termina:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

Propriedade abreviada de animação

O exemplo abaixo usa seis das propriedades de animação:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>

O mesmo efeito de animação acima pode ser obtido usando a abreviatura Propriedade animação:

Exemplo

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  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;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>

Propriedades de animação CSS

A tabela a seguir lista a regra @keyframes e todas as propriedades de animação CSS:

@keyframes: Especifica o código de animação
animation: Uma propriedade abreviada para definir todas as propriedades da animação
animation-delay: Especifica um atraso para o início de uma animação
animation-direction: Especifica se uma animação deve ser reproduzida para frente, para trás ou em ciclos alternados
animation-duration: Especifica quanto tempo uma animação deve levar para completar um ciclo
animation-fill-mode: Especifica um estilo para o elemento quando a animação não está sendo reproduzida (antes de começar, depois de terminar ou ambos)
animation-iteration-count: Especifica o número de vezes que uma animação deve ser reproduzida
animation-name: Especifica o nome da animação @keyframes
animation-play-state: Especifica se a animação está em execução ou pausada
animation-timing-function: Especifica a curva de velocidade da animação