CODEWITHSUNDEEP
cssoptimizationcss-animationsmobile-browser
Gil Goldshlager
Gil Goldshlager

Reputation: 771

optimize heavy website CSS3 animations for mobile devices

I'm working on a responsive website with lots of CSS3 animations (keyframes).
As much as it works good in a desktop Chrome browser, the site is too heavy for mobile and crashing it's browser or even sometimes restart the device LOL.

I'm new to both responsive and CSS animations, and will like to get your help to optimize the animations so they will work on mobile devices without crashing them.

I already changed all my animations (keyframes) from using position top/left to transform translate3D. And I also set the animation-play-state to "paused" by default, and changing it to "running" only when you get to the area of the element (when it's in viewport).
What more can I do please? or, do I can't do anything about that and should always pause the animations on mobile devices?

You welcome to answer me in general, or visit the site in the next link -
* DO NOT open it in a mobile, it may restart your device! *
Open it in latest Chrome or Firefox: http://goo.gl/BVsVH7

Again I'm new to both responsive and mobile, and I have no idea what I should and shouldn't do.

Upvotes: 0

Views: 1982

Answers (1)

Jimmie Johansson
Jimmie Johansson

Reputation: 1962

I think it is hard to make this work well on mobile devices today.

I ran your website on google pagespeed and there are plenty of stuff you can make better. Paste your url there and you'll get a bunch of tips for optimization.

Google PageSpeed Insights

Upvotes: 3

Related Questions