Como usar animações css3

o transformar comportamento é muito legal, mas CSS3 promete uma forma ainda mais emocionante de animação chamado (esperar por ele) animação mecanismo. Aqui está uma animação de uma caixa que move ao redor da tela.

Aqui está a estratégia básica para a construção de uma animação CSS:

1. Gerar um conjunto de quadros-chave.

   Animações são baseadas na noção de keyframes. Cada quadro-chave especifica o estado de um objecto, e o navegador tenta transição suave entre os quadros principais.

2. Fornecer uma percentagem para cada quadro-chave.

   O quadro-chave começa com um percentual, indicando onde a animação quadro-chave vai acontecer. O primeiro quadro-chave deve ser de 0% (o início da animação) ea última deve ser de 100% (o fim da animação). Você pode indicar o maior número de quadros-chave intermediários como você quer.

3. Adicionar uma folha de estilo mini-para cada quadro-chave.

   Coloque todos os estilos que você deseja modificados numa pequena folha de estilo. No local indicado na linha do tempo, um elemento seguinte esta animação irá mostrar o comportamento estilo dada. Você pode colocar qualquer informação estilo que você quer aqui.

4. Aplicar a animação a seus elementos.

   o animação regra permite que você aplique um quadro-chave a um elemento. Você pode reutilizar os mesmos keyframes entre muitos elementos diferentes, se quiser.

5. Modificar a animação.

   Você pode aplicar muitas das mesmas características de uma animação como você faz uma transição. Há uma série de parâmetros, mas os elementos mais utilizados são quadro-chave, tempo e repetição.

Dê uma olhada no código para animation.html para ver tudo em ação:

   
caixa movente

Há uma série de coisas a notar sobre este exemplo:

• Criar um conjunto keyframes chamada o @keyframes regra é usada para criar um recurso de nível de página que pode ser usado no resto do CSS. Neste caso, ele é usado para gerar um conjunto quadro-chave.

• Construir versões específicas do navegador: Infelizmente, o mecanismo de animação ainda requer prefixos específicas do navegador. Geralmente é mais fácil de atingir um navegador e, em seguida, copiar para os outros navegadores quando o comportamento básico está funcionando.

• Este exemplo move um elemento em um padrão quadrado: Para este exemplo particular, uma div irá mover em um movimento quadrado. Como você olhar para os quadros-chave, você verá que uma simples mudança para a posição esquerda e superior do div foi feito ao longo do tempo.

• Faça início e no final da mesma: Se você pretende executar esta animação continuamente, você quer que o início eo fim locais a ser o mesmo.

• Aplique o anim quadro-chave definido para o elemento: Aplique o anim quadrochave definida usando o animação regra.

• Indicar o comprimento da animação: Animações são sobre as mudanças ao longo do tempo, de modo que o animação tag também requer uma duração, medido em segundos (s) ou milésimos de segundo (ms).

• Determinar a flexibilização: Flexibilização é a forma como a animação age no início e no fim de um segmento de animação. o linear regra usados ​​aqui mantém a animação a uma velocidade constante. Você também pode usar (o comportamento padrão) aliviar-in-out para fazer o elemento de movimento a uma taxa variável.

• Determinar o número de repetições: Você pode especificar um número de vezes para repetir a animação. Se você deixar essa parte para fora, a animação vai acontecer apenas uma vez quando a página é carregada pela primeira vez. Você pode especificar infinita para fazer a repetição de animação, enquanto a página está na memória.

Nota: existem muitos outros parâmetros que podem ser definidas, tais como aliviando e demora. Estes podem ser definidos através do animação regra ou com regras individuais. Por enquanto, você pode querer manter suas animações tão simples quanto possível, pelo menos até que os navegadores podem gerenciar animações sem prefixos de fornecedores.