CODEWITHSUNDEEP
javascriptcssanimation
Pavel Podlipensky
Pavel Podlipensky

Reputation: 8269

What kind of CSS3 animations are asynchronous?

There are several ways to implement animations in the browser:

  1. Transitions
  2. Transformations
  3. Animations (@keyframes)
  4. Javascript-based animations

The latter one is certainly synchronous because of single UI thread. What about the others?

Which will block or get blocked by UI threads?

How to achieve smooth animations while browser is performing a lot of initialization work?

UPDATE

I found the answers in the following video: http://www.youtube.com/watch?feature=player_embedded&v=CE12cBoalIc

Upvotes: 0

Views: 2177

Answers (1)

Mircea
Mircea

Reputation: 11623

CSS transtions and CSS Animations will start as soon as all the page assets are loaded and CSS stylesheets parsed into the CSSOM. These do not block the UI thread. Javascript animations will impact on the UI performance if not done properly. If you need a JS animation be sure to use requestAnimationFrame. This will not block the UI and will schedule the changes to be done in batch synced with the browser refresh rate. The best way to achieve smooth animation in browser and keep the UI responsive is done with CSS transitions or animations.

Upvotes: 1

Related Questions