Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Summary
Most of the animated effects you’ll probably add to a website are fairly simple. Closing a modal window by fading it, opening another window by scaling it up from a small size, or sliding a third window in from the left or right are all relatively simple as far as the animating goes.
Any of these effects can be created using either transitions or CSS animations. You might prefer using one over the other, but generally you should choose based on what you’re trying to achieve and the pros and cons of each method.
For the simplest animations, with start and end states only, transitions are the way to go. Odds are most of the things you’ll animate will be better served using transitions.
When your animation needs more than a start and end state, when you need more control over the animation, or when you want the animation to look more realistic, you want to choose CSS animations over transitions.
You’ll probably find less use cases for CSS animations than transitions, but when you do find an animation use case, you can achieve a richer result using CSS animations.
The specific properties you choose to animate will determine the performance of your animation. Your choice between transitions and CSS animations won’t. Try to change properties that don’t require layout or painting changes. Stick to changes that only affect the compositor thread when possible.
Regardless of which you choose, jump in and start working with both transitions and CSS animations if you haven’t yet. Neither is difficult to learn, and both are fun to work with. Either can add a touch of delight to your website that your visitors will enjoy. They’ll walk away from your site with a better experience, even if they don’t know why.