[Translation]CSS Animations and CSS Transitions

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).

d1fa25aafffc709e7b84afe4bef940bb.png

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.

5afa18517384805705e9bd2d84aff045.png

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!

d9e881b72f79ff53879e9df3e653fe86.png

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.

8bd8a7b3aa1707bf20d192bff02be6d6.png