The translator of this article is the front-end development engineer of 360 Qiwu Group
Original title: CSS Animations Versus CSS Transitions
Original author: Kirupa Chinnathambi
Original source: “Creating Web Animations: Bringing Your UIs to Life”
There are two ways to set animations in CSS, namely CSS animations
and CSS transitions
. They look somewhat similar, but once you get to know them, you’ll find that they are very different. Next, we’ll explore the similarities and differences between the two, and when it’s better to choose one over the other.
Similarities
As mentioned just now, animations
and transitions
look very similar at first glance. They have the following things in common:
-
Both specify the CSS properties to be monitored.
-
You can control the rate of transition from one attribute value to another by setting timing functions.
-
You can control the time required for animation transition by setting duration
-
You can listen to animation events through code, and then further add the desired animation effects
-
CSS property changes are very intuitive
In addition, animations
and transitions
have their own unique features. Next we will look at these unique features in detail and conduct a comparative analysis.
Differences
animations
and transitions
differ in how animations are triggered, setting up animation loops, setting up animated transitions, using conventions, and controlling them with JavaScript. Let’s explore each in detail.
1. Triggering
One of the main differences between animations
and transitions
is the way animations are triggered.
transitions
triggers a start when a CSS property value changes. It doesn’t focus on how CSS property values change. The animation starts whenever the calculated property value changes from the originally set value.
For example, a common scenario is to use the :hover pseudo-class to change CSS property values (as shown below).
The CSS code looks like this:
.circle { border-radius: 100px; background-color: #DDF0FF; border: 10px solid #00CC00; } .circle:hover { transform: scale(2, 2); }
Listen to the change of transform through the transition
attribute, and you can see that the circle is getting bigger:
.circle { border-radius: 100px; background-color: #DDF0FF; border: 10px solid #00CC00; transition: transform .2s ease-out; } .circle:hover { transform: scale(2, 2); }
Another way to trigger transition
animations is by adding and removing CSS classes via JavaScript. CSS property values will change when CSS classes are added or deleted. Whenever the calculated property value changes, the property monitored by transition
will be animated.
Property values can also be changed by setting inline styles using JavaScript. Set up transition
to listen for changes to these properties. To change the size of the circle when clicked, your code could be written like this:
var circle = document.querySelector(".circle"); circle.addEventListener("click", changeSize, false); function changeSize(e) { circle.style.transform = "scale(4, 4)"; }
circle.style.transform = "scale(4, 4)"
This line of code is the most interesting. Because we have set transition
in CSS, the animation can still be triggered even if the transform property value is changed through JavaScript. This way of triggering animations by changing property values via JavaScript is pretty cool. You will see us using this method in later advanced tutorials.
In addition, if you want to trigger animation, you can also set it implicitly. When animation
is set, the animation will be automatically triggered. You can control this behavior by setting the animation-play state value. The attribute values are running and paused.
2. Loop
This is easy to implement, and you can loop the animation by setting the animation-iteration-count property. You can also set a fixed value to set the number of times you want to loop.
animation-iteration-count: 5;
If you just want the animation to loop infinitely, you can also do this:
animation-iteration-count: infinite;
transition
has no attributes that can be used to specify the number of times to loop. When the animation is triggered, transition
can only be played once. You can add a loop effect to transition
through the transitionEnd event. In comparison, animation
is much simpler to set up animation loops.
3. Define intermediate points/key frames
animation
allows you to further control CSS property values by creating keyframes between the start and end of the animation.
You can set as many keyframes as you want, and when the animation plays, each keyframe will reflect the specified property change. Each keyframe can even have its own timing function, so you can do interesting interpolation between CSS property values defined between keyframes as needed!
transition
can only play from the initial state to the final state. Keyframes cannot be set arbitrarily like animation
, so transition
is not suitable for complex animation effects.
4. Pre-specify attributes
Next, we’ll discuss the difference between animation
and transition
when it comes to animating transitions between CSS property values.
Usually when using transition
. You need to explicitly specify the CSS properties you want to listen for changes.
For example, the CSS might look like this:
#mainContent { background-color: #CC0000; transition: background-color .5s ease-in; } #mainContent:hover { cursor: pointer; background-color: #000000; width: 500px; }
On hover, we want to specify different values for background-color and width. But our transition
only listens for background-color changes. If we want background-color and width to animate at the same time, we need to add another transition
listener for width.
#mainContent { background-color: #CC0000; transition: background-color .5s ease-in, width .5s ease-in; } #mainContent:hover { cursor: pointer; background-color: #000000; width: 500px; }
You can also use the all
keyword to have transition
listen for changes in all property values. But for performance reasons, this should not be done by default. Of course, as with all claims of performance benefits or drawbacks, you should see if it applies to your scenario before taking my word for it.
animation
, you can specify the attributes you want in each keyframe:
@keyframes imageSlide { 0% { transform: translate(-150px, 0); } 20% { transform: translate(50px, 0) height: 200px; } 80% { transform: translate(200px, 0) height: 300px; } 100% { transform: translate(600px, 0) background-color: #FFFFFF; } }
In this example, including any properties other than height and background-color will produce a smooth animation, even if these properties are not pre-listened to!
5. Interaction with JavaScript
In short, if you want to use JavaScript to manipulate animations, using CSS transition
is a better choice. CSS animation
is not good at this because accessing and manipulating CSS animation
using code is very complex.
In some cases, just declaring a transition
or animation
in CSS is enough. You can specify a starting value, an ending value, and any intermediate values in CSS. Then animation
or transition
will automatically read these values and perform the corresponding animation effect. But sometimes, as in the previous example with random colors, you need to temporarily change the final value of a property. In this case, JavaScript is required.
When it comes to combining JavaScript with transition
or animation
, the obvious choice is almost always to use transition
. Using animation
in JavaScript is OK… but it’s like winning the Cinnamon Challenge (a very difficult eating competition). It’s not impossible to do, but chances are you don’t want to do it. The reason for this difference has to do with how transition
and animation
work.
animation
works in a special way. This is because the @keyframes
rule clearly lists the path for the animation to run. Each attribute value defined in a keyframe will produce a corresponding animation effect. There is no room for change. Changing keyframes in JavaScript requires a very complex series of steps, including modifying the @keyframes
style rule. If you’ve ever modified a CSS property value in a stylesheet, you’ll know that this is very difficult to achieve. If you’ve never done this before, it’s definitely worth trying it at least once…and only once.
transition
is the opposite of the predefined path of animation
. transition
is not as well defined as it seems. When the monitored property changes, transition
is started. As mentioned before, transition
doesn’t care how the properties it listens to change. Whenever the property value changes, the transition
animation will be triggered. That is to say, in interactive scenarios that do not involve predefined start points and end points, you can set the transition
attribute in CSS and use JavaScript to manipulate the objects monitored by transition
value, to take away all the tedious work associated with animation so you can do a lot of fun stuff. Later we will explain more examples of using this method.
Conclusion
Now that you have a thorough understanding of animation
and transition
, you probably have an idea of which one to use in what situations.
My principles for choosing them are as follows:
-
If I need the flexibility of multiple keyframes, then I would choose
animation
. -
If what I need is a simple transition animation, then I will choose
transition
. -
If I want the animation to start automatically or loop, then I would choose
animation
. -
If I wanted to use JavaScript to manipulate an animated property value, I would choose
transition
.
Now, you can choose whether to use transition
or animation
based on the actual situation, combined with whether you will use JavaScript to operate animation, and based on the characteristics of both. My suggestion is to use them based on their own characteristics. The hard work of changing their default behavior is admirable, but often unnecessary.
-END-
About Qiwu Troupe
Qiwu Group is the largest front-end team of 360 Group and represents the group in W3C and ECMA membership (TC39) work. Qiwu Troupe attaches great importance to talent training. There are multiple development directions such as engineers, lecturers, translators, business interfaces, and team leaders for employees to choose from, and are supplemented by providing corresponding technical, professional, general, leadership and other training. course. Qiwu Troupe welcomes all kinds of outstanding talents to pay attention to and join Qiwu Troupe with an open and talent-seeking attitude.