Regra CSS @keyframes

Definição e uso

Através da regra @keyframes, você pode criar animação.

O princípio de criação de animação é, gradualmente mudar um conjunto de estilos CSS para outro conjunto.

Durante o processo de animação, você pode mudar várias vezes esse conjunto de estilos CSS.

Use porcentagem para definir o tempo da mudança, ou através das palavras-chave "from" e "to", equivalente a 0% e 100%.

0% é o início da animação, 100% é o final da animação.

Dica:Para obter o melhor suporte do navegador, você deve sempre definir os seletores 0% e 100%.

Dica:Use os atributos de animação para controlar a aparência da animação, enquanto a liga à seleção.

Note:!important regra é ignorada nos keyframes (veja o último exemplo dessa página).

Veja também:

Tutorial CSS3:Animação CSS3

Exemplo

Exemplo 1

Make the div element move down at a constant speed:

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

try it yourself

Example 2

Add multiple keyframe selectors in one animation:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

try it yourself

Example 3

Change multiple CSS styles in one animation:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

try it yourself

Example 4

Multiple keyframe selectors with multiple CSS styles:

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

try it yourself

Example 5

Note:The !important rule is ignored in keyframes:

@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* ignored */
  to   {top: 200px;}
}

try it yourself

CSS syntax

@keyframes animationname {keyframes-selector {css-styles;}}

attribute value

value description
animationname required. Defines the name of the animation.
keyframes-selector

required. The percentage of the animation duration.

Valid values:

  • 0-100%
  • from (same as 0%)
  • to (same as 100%)
css-styles required. One or more valid CSS style properties.

browser support

Chrome IE / Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-