Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
CSS Transitions: A brief Introduction
3.
CSS Transitions: The specifics
4.
 
5.
 
6.
Transition Properties: A detailed view
6.1.
transition-property
6.2.
transition-duration
6.3.
transition-timing-function
6.4.
transition-delay
7.
An Example of CSS Transitions
8.
Frequently Asked Questions
9.
Key Takeaways
Last Updated: Mar 27, 2024

CSS Transitions

Author Pratyksh
0 upvote
gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

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.

 

So, let’s get started!

Recommended Topic, Difference Between CSS and SCSS

CSS Transitions: A brief Introduction

When altering CSS properties, CSS transitions allow you to adjust the animation speed. Rather than having changes to a property take effect instantly, you may have them take effect over time.

 

Consider a simple example where we change the background color from blue to yellow.

What usually happens is that the change is instantaneous, but when we utilize CSS transitions, we can control the change to take place over a specified duration.

 

  • Animations that require transitioning between two states are typically referred to as implicit transitions. As the name suggests, the states in between the start and end states are specified implicitly by the browser.

 

By using CSS Transitions, you can control which properties to animate, when to start the animation, and also the duration and behavior of transitions.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

CSS Transitions: The specifics

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:

 

div {
    transition: <property> <duration> <timing-function> <delay>;
}

 

 

Transition Properties: A detailed view

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.

 

HTML

<a class="text">Coding ninjas</a>

 

CSS

.text {
  font-size32px;
  transition-property: font-size;
  transition-duration2s;
}

.text:hover {
  font-size64px;
}

 

OUTPUT

 

 

transition-duration

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.

 

HTML

<div>
<a class="text">This transitions slower</a>
<br>
<a class="text2">This transitions faster</a>
</div>

 

CSS

.text {
  font-size32px;
  transition-property: font-size;
  transition-duration2s;
}
.text2 {
  font-size32px;
  transition-property: font-size;
  transition-duration0.5s;
}
div >a:hover{
  font-size:64px;
}

 

OUTPUT

 

transition-timing-function

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.

 

HTML

 

<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div>

 

CSS

 

div {
    width100px;
    height30px;
    background:lightgreen;
    color: black;
    font-weight: bold;
    transition: width 2s;
}

div:hover {
    width300px;
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

 

OUTPUT

transition-delay

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.

 

HTML

<div class="box uno"></div>
<br>
<div class="box dos"></div>

 

CSS

.box {
  width150px;
  height150px;
  background: goldenrod;
}

.box:hover {
  background-color: magenta;
}

.uno {
  transition-duration1s;
  transition-property: background-color;
  transition-delay:-1s;
}
.dos {
  transition-delay:1s;
  transition-duration1s;
  transition-property: background-color;
}

 

OUTPUT

 

An Example of CSS Transitions

Here’s another simple example that uses all the properties we’ve learned above.

 

HTML

<div class="box"></div>

 

CSS

.box {  
    width100px;
    height100px;
    background-color#2ACAEA;
    transition: width 2s, height 2s, background-color 2s;
}

.box:hover {
    background-color#9a7bf2;
    width200px;
    height200px;
}
#delay {
  font-size14px;
  transition-property: font-size;
  transition-duration4s;
  transition-delay2s;
}

#delay:hover {
  font-size36px;
}

 

OUTPUT

Frequently Asked Questions

1). What happens when the property value lists vary in length?

Answer: If the list of values for any property is shorter than the others, the values are repeated to make them match. Similarly, if the value list for any property is longer than the value list for transition-property, it is trimmed.

 

2). What is a typical use-case for transitions?

Answer: CSS transitions should be used whenever there is a change in the properties of an element. They help animations look elegant and lift up the aesthetic value of a webpage.
A typical use-case can be to use transitions to highlight menus and navbars.

Key Takeaways

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.

 

Happy Learning!

 

Previous article
CSS Media Queries
Next article
CSS Sizing Units
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass