Sintaxe de animação de quadro-chave - CSS-Tricks

Anonim

Declaração básica e uso

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Por uma questão de brevidade, o resto do código nesta página não usará quaisquer prefixos, mas o uso no mundo real deve usar todos os prefixos do fornecedor acima

Etapas múltiplas

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Se uma animação tiver as mesmas propriedades de início e fim, uma maneira de fazer isso é separar por vírgula os valores de 0% e 100%:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Ou você sempre pode dizer à animação para executar duas vezes (ou qualquer número par de vezes) e indicar a direção para alternate.

Chamando animação de frame-chave com propriedades separadas

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Abreviatura de animação

Apenas separe todos os valores individuais no espaço. A ordem não importa, exceto ao usar a duração e o atraso, eles precisam estar nessa ordem. No exemplo abaixo, 1s = duração, 2s = atraso, 3 = iterações.

animation: test 1s 2s 3 alternate backwards

Combine transformação e animação

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Múltiplas animações

Você pode separar os valores por vírgula para declarar várias animações em um seletor.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Degraus()

A função steps () controla exatamente quantos quadros-chave serão renderizados no período de tempo da animação. Digamos que você declare:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Se você usar as etapas (10) em sua animação, isso fará com que apenas 10 quadros-chave ocorram no tempo alocado.

.move ( animation: move 10s steps(10) infinite alternate; )

A matemática funciona bem lá. A cada segundo, o elemento se moverá 10px para a esquerda e 10px para baixo, até o final da animação e novamente ao contrário para sempre.

Isso pode ser ótimo para animações de spritesheet como esta demo de simurai.

Suporte para navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
4 * 5 * 10 12 5,1 *

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6,0-6,1 *

Mais recursos

  • MDN Docs
  • MDN: Usando animação CSS
  • Posso usar - Suporte ao navegador
  • VÍDEO: Introdução às animações CSS