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.
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,
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
- 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
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
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
What is animation in css
Similarly, the animation was born with exactly the same purpose
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
- 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
pausedthe 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.
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.
In a nutshell, we choose transition and animation to create
For demo : https://stackblitz.com/edit/transitionanimationdemo