Home > Designing, Others > Animate box-shadow with Silky Smooth Performance

Animate box-shadow with Silky Smooth Performance

November 24th, 2015 Leave a comment Go to comments

Neat trick by Tobias Ahlin:

How do you animate the box-shadow property in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change of box-shadow will hurt performance.

There’s an easy way of mimicking the same effect, however, with minimal re-paints, that should let your animations run at a solid 60 FPS: animate the opacity of a pseudo element.

Direct Link to ArticlePermalink


Animate box-shadow with Silky Smooth Performance is a post from CSS-Tricks

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.