Gigawiki.com
Animações em CSS
2012-06-26 20:19:55
2012-06-26 19:07:33
Autor:
Sony Santos
(sony)
https://gigawiki.com/sony/animacoes-em-css
Permalink:
https://gigawiki.com/2916
assunto = web design; categ = links, técnico
[XML]
[Impressão]
[Tuitar]
Há 2 modos de fazer animações com CSS:
- via
@keyframes e animations
- via
transitions
.
Em ambos os casos usa-se uma propriedade de
timing-function
que regula a velocidade inicial, média e final das animações, que é baseada em
cubic Bézier
.
Cubic Bézier é uma curva no espaço bidimensional (para este caso) que depende de 4 pontos. No CSS, ele recebe 4 parâmetros, mas eles não são os 4 pontos! Eles são os pares (x,y) dos dois pontos do meio! O primeiro sempre é (0,0) e o último sempre é (1,1).
Isso fica fácil de entender visualmente aqui.
Veja também:
-
um site show de bola com animações espetaculares só com CSS
;
-
um pacote de animações prontas
.
Please enable JavaScript to view the
comments powered by Disqus.
blog comments powered by
Disqus
Login:
Senha:
Para logar, você precisa ter o Javascript habilitado.
Busca avançada
categ = links
Manuais de Ruby
Ruby Coding Style
Complementos úteis para Firefox
Consertando a fase 72 do Eggerland Mystery
Links sobre o Marco Civil
Ensino On-line
Como instalar MongoDB no Ubuntu
CSS positioning
O verdadeiro final de A Caverna do Dragão
Páginas bonitas
Mais...
categ = técnico
Qual processo está ocupando uma porta no linux
Como formatar corretamente uma tabela com HTML e CSS
Animações em CSS
Testando endereço falso (URL Spoofing)
RewriteRule executando duas vezes
A diferença entre utf8_general_ci e utf8_unicode_ci
Formatador de HTML
Diferença de datas no Excel
Versão desktop