transição
Uma transição básica envolvendo propriedades CSS é definir e mover um elemento de seu estado de repouso (por exemplo, um fundo azul escuro) para seu estado suspenso ou ativo (por exemplo, um fundo azul claro).
As transformações podem ser usadas junto com as transformações (bem como gerar eventos como :hover ou :focus) para criar algumas animações. Esmaeça uma cor de fundo, deslize um elemento e gire um objeto, tudo com transições CSS.
A seguir está o conteúdo citado: #nav a{ cor de fundo:vermelho }; |
Alguns parâmetros para converter
propriedade de transição
Especifique o nome da propriedade CSS para a transformação. Por exemplo, no exemplo acima, a transformação é aplicada à propriedade background-color.
duração da transição
Defina o tempo que leva para converter (o tempo que leva para mudar do atributo antigo para o novo)
função de tempo de transição
Pode ser entendido como um efeito excessivo. Especifica o valor intermediário durante a conversão. Pode ser especificado com bezier cúbico. É claro que existem vários valores integrados comumente usados: facilidade |
atraso de transição
Isso é mais fácil de entender, é o tempo de atraso na conversão. O tempo pode ser um número inteiro positivo, um número inteiro negativo ou zero. Quando for diferente de zero, a unidade deve ser definida como s (segundos) ou ms (milissegundos). nesse ponto no tempo e a ação anterior será truncada.
Nota: A parte do parâmetro foi adicionada durante a tradução e não está no texto original.
Suporte ao navegador
Tão legal quanto o atributo transform, mas atualmente compatível apenas com navegadores WebKit. -moz-transition já está disponível nas versões noturnas recentes do Firefox 3.7. Você também pode adicionar -moz-transition ao seu CSS para melhorias futuras. Você pode até adicionar uma propriedade sem o prefixo privado, apenas para garantir.
Animação
A animação é onde o CSS 3 é mais útil. Você pode combinar todos os elementos que discutimos acima com propriedades de animação, como duração da animação, nome da animação e função de temporização da animação para criar efeitos como animações em Flash - CSS puro.
Endereço do vídeo: http://www.tudou.com/programs/view/YeTPctOy2mo
A seguir está o conteúdo citado: #girar { |
Este fantástico código de animação CSS e demonstração online podem ser vistos no site do webkit . A demonstração pode ser vista em qualquer site, mas o efeito de animação só é visível na versão noturna do WebKit no Mac os (Snow Leopard). Parece exatamente como no vídeo acima, e se você estiver no Mac OS (versão Snow Leopard), acho que vale a pena instalar um webkit para ver o efeito por si mesmo (é muito legal). Os usuários do sistema Windows estão temporariamente impossibilitados de apreciar esse efeito.
Alguns parâmetros de animação
Os parâmetros da animação são um tanto semelhantes aos da tradução, então se você entende os parâmetros da tradução, não será difícil entender aqui.
nome da animação
O nome da animação.
duração da animação
Defina o tempo necessário para a animação ser reproduzida uma vez. O padrão é 0;
função de tempo de animação
Defina a forma como a animação é reproduzida. As configurações dos parâmetros são semelhantes à função de tempo de transição.
atraso de animação
Defina quando a animação começa
contagem de iterações de animação
Defina o número de loops, infinito significa tempos ilimitados. O padrão é 1.
-webkit-animação-direção
A direção da reprodução da animação, dois valores, o padrão é normal. Neste momento, cada ciclo de animação será reproduzido. O outro valor é alternado, então os tempos pares serão reproduzidos para frente e os tempos ímpares serão reproduzidos na direção inversa.
Suporte ao navegador
Infelizmente, atualmente, apenas alguns navegadores suportam animações CSS. As animações CSS 2D funcionam no Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira e outros navegadores Webkit. Safari 4 (Snow Leopard) suporta animação 3D.