Els animacions CSS3 permeten animar la transició entre un estil CSS i un altre. Aquestes consten de dos components. D'una banda, tenim a l'estil que descriu l'animació, i per un altre a el conjunt de fotogrames que indiquen el seu estat inicial i final.
Les animacions CSS tenen alguns avantatges com que són bastant senzilles de fer si se les compara a les de les tècniques tradicionals per scripts i per això, si fem servir unes fonts de recursos ben interessants i de qualitat, el treball serà fins i tot més fàcil. De tota manera, porta el seu temps i poden ser ben difícils, de manera que aquestes fonts de recursos us poden venir molt bé.
funció Easing
Aquesta especifica la velocitat de l'animació per fer-la més realista. S'obre el calaix, se li dóna acceleració i finalment se li frena. Quan alguna cosa cau, primer baixa ràpidament per acabar rebotant. Podràs trobar la funció desitjada en aquesta pàgina de easing.net. El millor és que està en el nostre idioma perquè et sigui més fàcil manejar-te amb aquest lloc web.
Animate.css
Donen Eden ha compilat una llibreria d'animacions CSS de gran bellesa que pots utilitzar els teus projectes. El projecte en si és una gran font d'inspiració.
Anima't Plus
Stripe és ben conegut per les seves pàgines de producte que tenen una gran qualitat en totes les animacions que posseeix. Una de les seves ments creatives que es troba darrere d'aquestes animacions és Benjamin De Cock, que ha creat una llibreria d'animació CSS i SVG que rendeix molt bé i és lleugera en pes; perfecta per al mobile.
Hover.css
Un recurs similar a Animate.css, Hover.css és una col·lecció d'efectes CSS que els tens de forma lliure per utilitzar com vulguis en els teus projectes. Se centra en els efectes hover per enllaços, botons, imatges i més.