There are plenty of libraries that help us animate the elements of DOM, but the most crucial piece is still CSS Transitions. It's among the first animation tools that most front-end developers learn, and it's a powerhouse.
It isn't limited only to the new developers; even the most experienced developers use this tool often. This article will explore what CSS transitions are and how we can use them to create elegant and smooth animations.
CSS Transitions allow you to create smooth changes between different styles of an element over a specified duration. They enable elements to transition from one state to another, such as when hovering over a button, changing its color or size with an animation effect. CSS transitions are used to improve user interactions and make webpages feel more dynamic.
Working on CSS Transitions
CSS transitions are managed via the transition property, which is a shorthand for the following sub-properties:
transition-property
This property helps to explicitly specify the CSS properties to which transitions must be applied. Only the properties that are listed here are animated during transitions, and other properties show default behavior.
transition-duration
The time-duration specifies the time span over which transitions should take place. You can specify a single duration for all properties throughout the transition or multiple values to allow each property to transition over a separate time period.
transition-timing-function
This property helps to explicitly specify a function that will be used to compute intermediate values for attributes. Timing functions govern how intermediate transition values are determined.
transition-delay
This property helps to explicitly specify the amount of time to wait between changing a property and starting the transition.
The above four properties are controlled using the shorthand transition property, whose syntax looks like this:
Syntax
div { transition: <property> <duration> <timing-function> <delay>; }
CSS Transition Properties
Let’s understand the above-given transition properties in detail along with their suitable examples.
transition-property
As discussed earlier, the transition-property lists the CSS properties to which transitions would be applied. If a shorthand property like background is added to the list, all the sub-properties that can be animated will be.
The values that this property can hold are:
None: None of the properties will transition.
All: All the properties that can transition will transition.
<custom-indent>: A string that identifies the property that should have a transition effect applied when its value changes.
Below, is a simple example of the transition-property in action.
The transition-duration CSS property specifies how long it should take for a transition animation to complete. By default, the value is 0s, indicating that no animation will take place.
You can provide several durations; each duration is applied to the corresponding property specified under the transition-property, which functions as a master list.
Let's have a look at an example to understand better.
This property specifies how intermediate values for CSS attributes impacted by a transition effect are calculated.
The predefined keyword values allowed are:
ease
linear
ease-in
ease-out
ease-in-out
step-start
Step-end
Each of the specified keywords has a corresponding cubic Bézier curve or stepping function value.
You may set intervals for the timing function using the steps() function. It accepts one or two parameters, separated by a comma: a positive integer and an optional start or end value. If no second argument is specified, the default value is end.
To learn more about the cubic Bézier curve, check this link out.
Here’s an example of some transition-timing functions.
As we’ve seen earlier, When a property's value changes, the transition-delay CSS property defines how long to wait before initiating the transition effect.
This property accepts the following values:
Zero A value of 0s will begin the transition effect immediately.
Positive value This will delay the start of the transition effect for the given length of time.
Negative value This will start the transition effect instantly and will take you halfway through it. In other words, the effect will be presented as if it has already been running for the amount of time specified.
Let’s have a look at an example to see this property in action.
What are the different transition properties in CSS?
CSS transition properties include transition-property, transition-duration, transition-timing-function, and transition-delay, controlling the transition effect, duration, speed, and delay.
What is the transform property in CSS?
The transform property in CSS allows you to apply 2D or 3D transformations like scaling, rotating, translating, or skewing elements.
When to use CSS transitions?
CSS transitions are used to create smooth, animated changes between element states, such as hover effects, focus states, or other user interactions.
How to trigger a CSS transition?
A CSS transition is triggered by changing a property value, often through user interactions like hovering, focusing, or active states, or via JavaScript.
Conclusion
CSS transitions are essential, but that doesn't make them simple. The importance of CSS transitions is underestimated more often than not. One might think that a single transition here and there will not make or break an experience, but they do add up.
You can also check out some important CSS concepts such as Introduction to CSS, CSS Selectors, CSS Pseudo-elements, and CSS Margins.
While preparing for front-end roles, we suggest you go through the CSS Interview Questions, including the most common conceptual questions asked in interviews.
8+ registered 