The CSS transition
property is a shorthand property that allows us to animate effects in CSS. transition
gradually changes a CSS property from its original value to a new value over a period of time.
CSS property changes from one value to another are instantaneous, like a sudden blink; to the human eye, they would be basically imperceptible. transition
allows us to slow down the change so that it can happen gradually over a period of time in a way that is perceptible to the human eye.
Example:
div.banner { width: 100px; padding: 10px; background-color: seagreen; border: 1px solid deepskyblue; transition: width 2s; } div.banner:hover { width: 150px; }
You can play with an example here:
See the Pen
css transitions by Chidume David (@philipsz-davido)
on CodePen.
Above, we increased the width of the element to 150px when hovered over. The transition
property set in div.banner
makes the increase in length render slowly over a period of 2 seconds.
We will see the width of the element expand to 150px, and the text slowly re-align itself to compensate for the width increase. When the mouse is moved away from the div.banner
element, it changes its width to 100px in a slow fluid motion again, and its text wrapping reverts to its original state.
Let’s take a look at another example:
div.banner { width: 100px; padding: 10px; background-color: seagreen; border: 1px solid; transition: background-color 4s ease-in 1s; } div.banner:hover { background-color: limegreen; }
You can play with the above example here:
See the Pen
css_transition_background_color by Chidume David (@philipsz-davido)
on CodePen.
Here, when a user hovers over the div.banner
element, the transition delays for 1 second, and then the original background-color
of seagreen
is changed to limegreen
over a period of 4 seconds. We see a fading effect, the seagreen
color gradually dimming and the limegreen
color gradually coming up to take its place.
Note that we used the :hover
pseudo-class to trigger the transition. We can use other means to trigger transitions as well — for example, we might change an element’s state from valid to invalid, disable or enable the :disabled
state, activate the :active
state, etc.
The transition
property takes a space-separated list of values:
transition: <property> <duration> <timing-function> <delay>
<property>
is the animatable CSS property we want to animate from its original value to a new value when the property changes<duration>
is the period of time for which the animation will last. We can set the duration in seconds (s
) or in milliseconds (ms
)<timing-function>
is a method to control the pace of the animation<delay>
is the time to delay before transitioningIn our earlier example:
div.banner { ... transition: background-color 4s ease-in 1s; } ...
background-color
is the CSS property of div.banner
we want to animate when the property changes4s
is the duration of the property-change animationease-in
is the timing-function. This makes the effect start slow, then speed up1s
before it beginsWe can set multiple properties to transition
. The properties must be comma-separated.
transition: background-color 4s ease-in 1s, width 2s;
Here, two properties are set for transition animations: background-color
and width
. Now, transition
listens for when either or all of the properties (background-color
and width
) change.
The transition
property is a shorthand for four longhand transition properties:
transition-property
transition-duration
transition-timing-function
transition-delay
transition-property
The animatable property to transition.
transition-property: border-radius
This sets the border-radius
as the CSS property in the element we want to run the transition effect on when it changes.
transition-property: margin-right
This triggers transition
when the element’s right margin (margin-right
) changes.
transition-property
limits transitions to only specified properties, leaving the rest to change instantaneously. Multiple properties can be assigned to transition-property
in a comma-separated list.
Consider the example below:
transition-property: margin-right, color, border-radius;
This example selects only the right margin, text color, and border-radius properties to undergo transition whenever their values change.
transition-property
can take the following values:
none
: No property is chosen for the transitionall
: All the animatable properties in the element are chosen for the transitiontransition-duration
The duration of the animation, or the time it will take to complete. The unit can be set to seconds (s
) or milliseconds (ms
).
transition-duration: 1s
Like transition-property
, you can provide multiple values for transition-duration
in a comma-separated list.
transition-duration: 1s, 200ms;
Each value in the list applies, respectively, to each value set in the transition-property
.
transition-property: width, color; transition-duration: 1s, 200ms;
1s
will be applied to the width
property, and 200ms
will be applied to the color
property. This means that the transition duration of the width
property value change in the element is 1 second, and the transition duration of the color
property value change in the element is 200 milliseconds.
transition-timing-function
The transition effects, or how the transition will play out. It ultimately controls the speed of the transition.
The transition-timing-function
can take the following values:
ease
linear
ease-in
ease-out
ease-inout
step-start
step-end
steps(n, start)
, where n
is the number of steps—steps(n, end)
cubic-bezier(x1, y1, x2, y2)
Let’s look at the major values from among the above:
ease
: This makes the transition start slowly, then gradually speed up, then slow down, ending very slowlylinear
: The transition speed from start to end is the same; it is linearease-in
: The transition starts slow and then speeds upease-out
: The transition starts fast, then slows downease-in-out
: The transition starts slowly, moves faster in the middle, then slows down, and ends not too slowlyHere’s an example:
transition-property: width; transition-duration: 1s; transition-timing-function: ease-in;
Above, the transition is triggered on the width
property change. The transition-timing-function
set to ease-in
will make the width change start slowly and gradually speed up within a 1-second time frame.
transition-delay
The time between the change in property state and the beginning of the transition to the new state. The value is expressed in either seconds (s
) or milliseconds (ms
).
transition-property: width; transition-duration: 1s; transition-timing-function: ease-in; transition-delay: 1s;
Above, we set a delay of 1s
before the transition begins.
Consider another example:
transition-property: border-radius; transition-duration: 2s; transition-timing-function: ease-in; transition-delay: 10ms;
Here, the transition animation will be delayed for 10ms
when the element’s border-radius
state changes.
If this property has a value of 0s
, the transition will start immediately when the targeted property changes state.
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowSOLID principles help us keep code flexible. In this article, we’ll examine all of those principles and their implementation using JavaScript.
JavaScript’s Date API has many limitations. Explore alternative libraries like Moment.js, date-fns, and the new Temporal API.
Explore use cases for using npm vs. npx such as long-term dependency management or temporary tasks and running packages on the fly.
Validating and auditing AI-generated code reduces code errors and ensures that code is compliant.