As animações CSS oferecem três grandes vantagens face às técnicas de animação tradicionais baseadas em scripts:
- São simples de usar para animações simples, nem sequer é preciso saber JavaScript para as fazer.
- Mesmo com uma carga de sistema moderada, as animações correm bem. Em JavaScript, as animações simples correm muitas vezes mal. Para tornar o desempenho o mais fluido possível, o motor de renderização pode recorrer ao salto de fotogramas e a outras abordagens.
- Deixar o navegador regular a sequência de animação permite-lhe melhorar o desempenho e a eficiência, limitando por exemplo a frequência de atualização das animações nos separadores que não estão visíveis.
Embora a maioria das animações se consiga fazer só com CSS, podes usar bibliotecas e frameworks de animação para criar melhores animações em menos tempo.
1️⃣ Animate.css – Animações CSS de Daniel Eden
2️⃣ Anime.js – O Anime.js é uma biblioteca de animação JavaScript leve, com uma API simples mas poderosa. Funciona com propriedades CSS, SVG, atributos do DOM e objetos JavaScript.
3️⃣ CSShake – O CSShake faz exatamente o que promete: é uma biblioteca CSS pensada especificamente para abanar os elementos da tua página web.
4️⃣ Hover.css – O Hover.css é uma biblioteca de animação CSS pensada para botões e outros elementos de interface do teu site.
5️⃣ AniJS – O AniJS é uma biblioteca de animações que te permite acrescentar animações aos elementos com uma estrutura simples, parecida com uma frase.
6️⃣ Animista – Animações CSS a pedido
7️⃣ Tachyons Animate – O Tachyons é uma biblioteca CSS atómica com uma enorme quantidade de classes utilitárias que permitem desenhar o que quer que seja acrescentando apenas as classes de que precisas.
8️⃣ Sequence.js – O Sequence.js é uma biblioteca JavaScript que fornece uma framework CSS responsiva para criar sliders, apresentações, banners e outras aplicações baseadas em etapas.
9️⃣ Infinite – Estas animações, como as rotações e as pulsações, foram pensadas para funcionar e repetir-se infinitamente.
🔟 OBNOXIOUS.CSS – Animações para os fortes de coração e os fracos de espírito
1️⃣1️⃣ MOTION UI – Uma biblioteca Sass para criar transições e animações CSS flexíveis.
1️⃣2️⃣ Keyframes.app – Uma interface gráfica para gerar animações CSS personalizadas por keyframes.
1️⃣3️⃣ AnimXYZ – O AnimXYZ ajuda-te a criar, personalizar e compor animações para o teu site. Feito para Vue, React, SCSS e CSS.
1️⃣4️⃣ Whirl – Animações de carregamento em CSS com o mínimo de esforço!
1️⃣5️⃣ Hamburgers – O Hamburgers é uma coleção de saborosos ícones de hambúrguer animados em CSS. O código-fonte também está incluído como biblioteca Sass. É modular e personalizável, por isso prepara o teu próprio hambúrguer.
