Animações em CSS
2012-06-26 20:19:55
2012-06-26 19:07:33
Autor: Sony Santos
https://gigawiki.com/sony/animacoes-em-css
Permalink: https://gigawiki.com/2916
assunto = web design; categ = links, técnico
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.
blog comments powered by Disqus