1 private link
To make sure your animations don’t cause performance issues, consider the impact of animating a given CSS property. Avoid layout recalculations and minimize repaints. Where you can, stick to changing transforms and opacity.
"Optimizing CSS: Tweaking Animation Performance with DevTools", Maria Antonietta Perna (@AntoniettaPerna)
CSS animations are known to be super performant. Although this is the case for simple animations on a few elements, if you didn’t code your animations with performance in mind and add more complexity, website users will soon take notice and possibly get annoyed.
"In the first tutorial of the series, you will learn about the basics of Anime.js. You will learn things like like selecting target elements and animating different properties related to them."
"So let's stop pushing the web forward for a year. It'll free us from the churn of ever more features and ever more tools."
"Gratuitous animation can be seen everywhere and it’s not only limited to amateur designers. As a user it’s easy to spot this kind of animation. It’s the animation that gets in your way. The animation that makes you furrow your brow in frustration as it stands between you an your intended goal."
Invisible, that’s how animation should be.
"A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS."
"The web is flat, but now you can fold it up."
Tutoriaux intéressants sur l'animation des tuiles (dalles ?) des interfaces Windows Phone 7, en respectant les lignes directrices de l'interface Métro.
ARTE diffuse 6 grands films d'animation du maître Miyazaki et un documentaire sur les studios Ghibli.