Como criar animações com quadros-chave

Para criar efeitos animados em seu site para mostrar no iPad e iPhone, você precisa usar quadros-chave. Mais CSS complexo 3 animações contar com quadros-chave. keyframes são os pontos dentro de uma animação que alguma coisa muda. Sempre que você quiser mudar um objeto animado, você precisa criar um novo quadro-chave.

Por exemplo, se você quiser animar uma bola quicando, como mostrado na figura, você precisa ter um quadro-chave no topo do salto e outro na parte inferior do salto.

Neste exemplo, a bola é de 50 pixels de diâmetro e o recipiente para a bola é de 350 pixels de altura. O primeiro quadro-chave, por conseguinte, coloca a bola na parte inferior do recipiente, e o último a coloca no topo do recipiente.

Aqui está o código que faz este trabalho:

@ -webkit-Keyframes saltar {de {margin: 300px auto 0-} para {margin: 0 auto 0-}}

A @ -webkit-keyframes bloco contém regras que definem cada quadro-chave. Um quadro-chave define o estilo para esse momento dentro da animação. Você pode ter um começo e um fim, como no exemplo mostrado aqui, ou você pode definir qualquer número de pontos no meio. Alguns navegadores da Web aplicar este estilo mais suave do que outros, mas o Safari no iPhone e iPad fazer este trabalho muito bem.

Neste exemplo simples bola quicando, uma animação chamada ressalto é definido para ter dois quadros principais: um para o início da animação (a a partir de bloco) e um para a extremidade (a para quadra). Estes dois quadros principais mover a bola a partir de o fundo para o topo.

Quando você define uma animação com um conjunto de quadros-chave, você pode usar o seguinte webkit-animation Propriedades:

• animation-name - define a animação utilizado. Apontá-lo para ressalto, o conjunto quadro-chave definido anteriormente. Se o nome não for encontrado (que está faltando ou com erros ortográficos), o navegador assume o valor padrão de Nenhum e nenhuma animação é produzido:

  -webkit-animação-name: bounce-

• animação duração - define o comprimento da animação. O formato de valor de tempo é um número seguido por um identificador de unidade de tempo. Os identificadores de unidade de tempo Senhora para milissegundos e s por segundos (1000 ms, 1s). A animação da bola quicando dura um segundo.

  A figura ilustra como o navegador cria automaticamente o interpolada quadros - os quadros entre a parte superior e inferior. Você define o início eo fim eo navegador preenche o que é # 147-in-estartween.# 148;

  webkit-animação-duração: 1S-

• animação iteração contagem - define o número de vezes que um ciclo de animação é jogado. O valor padrão é 1, e esse valor faz com que o jogo de animação do início ao fim uma vez. Um valor de infinito faz com que a animação se repita sempre. Como você pode imaginar com base nessa informação, no exemplo a seguir, a animação é reproduzida dez vezes:

  -webkit-animação-iteração contagem: 10-

• animação direção - define se a animação deve desempenhar no sentido inverso qualquer outro ciclo. E se alternar é especificado, todas as outras ciclo de animação é jogado no sentido inverso. Quando uma animação é jogado em sentido inverso, as funções de temporização também estão invertidos.

  É por isso que você precisa para definir a bola como só saltando para cima. A animação alternativo é reproduzida em sentido inverso, trazendo a bola de volta para baixo para a parte inferior da caixa (não diferente gravidade).

-webkit-animação-direção: alternate-

Junte tudo e a regra de estilo que faz o trabalho de animação saltando bola parece com isso:

#animationDemo #ball {-webkit-animação-name: salto - webkit-animação-duração: 1s - webkit-animação-iteração contagem: 10 - webkit-animação-direção: alternate-}

Quando você entra em uma ou mais propriedades, certifique-se de seguir esta ordem:

1. de transição de propriedade

2. duração da transição

3. transição-timing-function

4. transition-delay

Use a seguinte declaração para a demonstração bola quicando:

#animationDemo #ball {salto 1s 10 alternate-}

Para uma lista completa das propriedades CSS você pode animar usando transições, visita CSS Transitions Módulo de Nível 3.