Technology|Tips & tricks

Today we gonna figure out the main differences between transition and animation CSS. As a result, we will learn some use cases for using each of them.

Transition

What is transition in css

“transition” is a CSS property, that helps us to define behavior when a CSS style has changed. The most important thing we need to keep in mind that transition only works with only CSS properties, what only accept the numeric value.

For example, there is a DOM element has CSS with “width:0px”. When under some circumstances, that CSS has changes to “width:200px”. At that time, if we don’t define a transition for that element, we will get a blink effect that means the size change immediately. Because the change happens immediately, the user won’t notice what has changed and they’re confusing. But with “transition”, it makes the change happens in a gradual way, the user will notice what has changed and will happy with it.

In this blog, I have just show you how to integrate transition with Intersection Observer API to create attractive scrolling effect.

How to use transition

Syntax:

  • transition-delay: 0s; // Define the period of time need to take before trigger transition (0.5s, 1s, 2s)
  • transition-duration: 0s; // Defined how long the transition transform (0.5s, 1s, 2s)
  • transition-property: all; // Defined which CSS property need to apply transition (all,width,height,margin-left…)
  • transition-timing-function: ease; // Defined how transition transform (ease, linear, step)
// Shorthand
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

How transition works

Transition help us to will keep track the change in the CSS styles we defined for “transition-property”. Whenever the changes happen, firstly “transition” will wait for a period of time before trigger to delay the transition as we expected when we defined “transition-delay”.

Secondly, the transition will compute the transformation within a period of time we defined “transition-duration”. For example, when the change happens from “width:0px” to “width:500px” and the transition-duration was set to 5s, it means at the beginning of the transition, the width size will be 0. After 1 second, the width size will grow gradually to 100px. Similarly, in the third second, the width size will be 300px and gradually grow to 500px at the fifth second and finish the tranformation.

One thing we need to keep in mind that because the transition keeps track the changes of CSS properties, for that reason “transition” need to be used before the beginning state and after the ending state. In another word, “transition” need to be present before and after the change.

For example, we have an element with a class “stand“. After the trigger, we add one more class “move“, it sets that element to move on the right. If we set transition for class “move“, we will get the problem when class “move” is removed. At that time the transition is also removed so we lost the animation when the element return the original state. But if we set transition for “stand” class, we won’t face that kind of problem.

When to use transition

We use transition CSS when we want to apply the animation when there are some css properties have changes under some specific condition. That animation help to improve the user experience by lets the user notice what has changes in the view easily.

Animation

What is animation in css

Similarly, the animation was born with exactly the same purpose with the transition. But with one thing different is instead of keep track the changes and apply the transform for that changes like transition, in contract animation doesn’t keep track the change. animation trigger the change and apply the transform these changes.

To do that, animation doesn’t only contain information about how the transformation is executed, but also contains the information to defined what properties will be change by the help for @keyframes

How to use animation

Syntax

  • animation-name: none; // Defined the keyframe name to determine what CSS property will be applied animation
  • animation-duration: 0s; // Defined how long the animation is executed
  • animation-timing-function: ease; // Defined timing function for execute animation
  • animation-delay: 0s; // Defined a period of time the animation will delay before trigger
  • animation-iteration-count: 1; //Defined number of times the animation is executed (1,2,infinite)
  • animation-direction: normal; // Defined the animation play forward, backward or alternating back and forth (normal,reverse,alternative)
  • animation-fill-mode: none; // Defined how to apply styles before and after the animation
  • animation-play-state: running; // In case we want to paused the animation and later on resume them with the start of animation at the same point where it left off, just set this property to paused and resume it by running (running, paused)

How animation work

The way animation works are exactly the same with they way transition work: firstly wait for the delay, after that compute and apply the transition, finally finish the transition. But the main difference between animation and transition is how are they trigger. Transition is triggered when there is a change on styles that they are tracking happen. In constrast, animation is triggered when it is applied in style. Animation doesn’t keep track any style change, it creates style change by itself via @keyframes that was defined in animation-name

when use animation

We use animation instead of transition when we want a more powerful and more flexible way to apply the transform. Beside that we choose animation because we can defined the style changes by itself, don’t want to keep track the style changes.

Conclusion

In a nutshell, we choose transition and animation to create the smooth transform for styles changes, make user easy to recognize what has changed by their action. Offer the same functionality with transition, animation also give us a more powerfull to create the transform with flexibilities

For demo : https://stackblitz.com/edit/transitionanimationdemo