Como usar CSS3 animações
o transformar comportamento é muito legal, mas CSS3 promete uma forma ainda mais excitante 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:
Gerar um conjunto de quadros principais.
As animações são baseadas na noção de keyframes. Cada quadro-chave especifica o estado de um objeto, e o navegador tenta transição suave entre quadros-chave.
Fornecer uma porcentagem para cada quadro-chave.
O quadro-chave começa com uma porcentagem, que indica onde na animação quadro-chave vai acontecer. O primeiro quadro-chave deve ser de 0% (o início da animação) e o último deve ser de 100% (o final da animação). Você pode indicar o maior número de keyframes intermediários como você quer.
Adicionar uma folha de estilo de mini para cada quadro-chave.
Coloque todos os estilos que você quer modificados em uma pequena folha de estilo. No local indicado na linha do tempo, um elemento seguindo este animação irá mostrar o comportamento estilo dada. Você pode colocar qualquer informação do estilo que você quer aqui.
Aplicar a animação a seus elementos.
o animação regra permite aplicar um quadro-chave a um elemento. Você pode reutilizar as mesmas keyframes entre muitos elementos diferentes, se quiser.
Modificar a animação.
Você pode aplicar muitas das mesmas características de uma animação como você faz uma transição. Há um número de parâmetros, mas os elementos mais vulgarmente utilizados são quadro-chave, o tempo, e de repetição.
Dê uma olhada no código para animation.html para ver tudo em ação:
animation.html Caixa movente
Há uma série de coisas a notar sobre este exemplo:
Criar um conjunto de quadros-chave chamada o @keyframes regra é usada para criar um recurso de nível principal que pode ser utilizado no resto do CSS. Neste caso, ele é usado para gerar um conjunto quadro-chave.
Criar 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 da div foi feita ao longo do tempo.
Faça início e no final do mesmo: Se você pretende executar este animação continuamente, você quer que o início eo fim locais a ser o mesmo.
Aplique o anim quadro principal definido como o elemento: Aplique o anim quadro-chave definida usando o animação regra.
Indicam o comprimento da animação: As 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 funciona no início e no fim de um segmento de animação. o linear regra utilizada 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. Pode especificar infinito para fazer a repetição de animação, enquanto a página está em memória.
Observe que há muitos outros parâmetros que podem ser configuradas, 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.