CSS Transitions

Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning

Introduction

Guess what makes a website visually appealing and user interactive?? Yes! Animations it is. And there can not be a simpler way to animate your components than CSS Transitions.

CSS Transitions is one of the significant aspects of Animations in CSS which allows us to make some amazing interactive features.

Here Are The Key Takeaways from this article:-

  • CSS transitions are the most simple way to animate an element.
  • The four Transition properties - transition property, duration, timing function, and delay.
  • Performing a series of transitions in one line.
  • Transitioning multiple properties.
  • Applications of CSS Transitions.

So, Let's dive right into the topic...

What are CSS Transitions?

What are CSS Transitions

Are you bored with creating static web designs using CSS? If yes, then now you create easy dynamic animations using only CSS transitions. It can make your content come ALIVE!

CSS Transitions are a set of core interactions, by which the properties change over a while.

Right from hovering a mouse over an element, to creating some awesome Slider transition, the humble CSS transition has got you all covered.

Syntax:

Here, transition property includes 4 properties which are transition-property, transition-duration, transition-timing-function, and transition-delay.

Note: This is also known as the shorthand property for CSS Transitions. We'll learn more about this in upcoming sections.

Example: Working with CSS Transitions

Let's create a very simple and easy hover transition on an element.

Output: The output of CSS transitions on hover.

Working with CSS Transitions

The four CSS Transition Properties

Suppose, we throw a ball from one place to another. During the whole process(transition) the ball will change its State.

Similarly happens with CSS properties. Transitions come into play when the CSS properties change from one state to another.

To apply CSS transitions to our element, we have to apply certain properties to it.

It contains a combination of four properties mentioned below:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

transition-property

transition-property is used to select the property of an element on which the transition is to be applied.

Syntax:

Output: The output of a box by applying CSS transition-property on it

transition-property

Note the box expands while hovering over it. It's because we have added a transition-property width which changes the width of the box to 200 px while hovering over it.

transition-duration

The transition effect created above looks pretty good, but it's something...Smoothness To apply a smooth transition effect, we use transition-duration.

Transition duration defines the time duration an element takes to transition over two states.

Syntax:

  • time: In seconds(s) or milliseconds(ms)
  • initial: Sets this property to its default value.
  • inherit: Inherits this property from its parent element.

Code:

Output: The output of a box by applying CSS transition-duration on it

transition-duration

Here, the transition appears to be more smooth because we have added transition-duration: 1s; due to which the transition takes 1s to complete the transition.

Note: Default value of transition-duration is 0s.

transition-timing-function

transition-timing-function describes how the transition speed will vary over the time duration.

Syntax:

Here, the default value is ease where the transition starts and ends slowly while accelerating in the middle. cubic-bezier() is a function used to defines a Cubic Bezier curve for a smoother transition.

Example

Code:

Output: The output of a box by applying CSS transition-timing-function on it

transition-timing-function

Notice the speed of transition from start to end. It's the same!! This is because the transition-timing-function has been set to linear.

transition-delay

The transition-delay property is used to specify the time delay before the transition start.

Syntax:

Here, time is mentioned in seconds or milliseconds.

Example

Code:

Output:

transition-delay

Notice there is a transition-delay of 1s when the transition begins.

The transition Shorthand Property

Well, that's a lot of code. What if we can combine all the above four properties in a single statement? The noble CSS has got your back!! CSS transition Shorthand Property allows developers to write all 4 properties in a single statement instead of writing them separately.

Syntax:

Example

Code:

Which CSS Properties Can be Transitioned?

Generally, transitions can be applied to any CSS property which has a discrete value that changes between the two states.

Yet, certain properties cannot be transitioned because they are not animatable properties.

Here's the list of animatable properties:

  • background-color
  • background-position
  • border-color
  • border-width
  • border-spacing
  • bottom
  • clip
  • color
  • crop
  • font-size
  • font-weight
  • height
  • left
  • letter-spacing and so many more..

Why use CSS Transitions?

Let's go through these 2 buttons

Why use CSS Transitions

Which button appears more appealing? The first one.

CSS Transitions is the reason why the first button is appearing more captivating. It contains some core interactions that we can use without using Javascript.

With Transition

Let's create a simple search box using Transitions.

Output: The output of the search box using CSS Transitions With Transition

Without Transition

Now, let's create the same search box without using transitions and compare the results.

Code:

Output: The output of search box without using CSS Transitions Without Transition

Notice the difference between the above two examples, the first search box appears to be more soothing compared to the other one. It's because of the transitions applied.

To get a better understanding of CSS transitions, let's discuss the CSS properties in detail.

Transition Timing Function

CSS transition-timing function controls the rate of the transition during the period. To understand this topic more effectively, let's observe the below-shown transitions.

ease- The transition will start slowly, will accelerate in the middle, and slow down in the end.

Output: Transition-timing-function: Ease

ease-in- The transition will start slowly, and accelerates gradually until the end.

Output: Transition-timing-function: Ease In

ease-out- The transition will start quickly, and decelerates gradually until the end.

Output: Transition-timing-function: Ease Out

ease-in-out- The transition will start quickly, and decelerates gradually until the end.

Output: Transition-timing-function: Ease In Out

linear- The transition has a constant speed.

Output:  Transition-timing-function: Linear

step-start- The transition jumps instantly to the final state.

Output: Transition-timing-function: Step Start

step-end- The transition stays at the initial state until the end, when it instantly jumps to the final state.

Output: Transition Timing Function: Step End

steps(n,end)- By using steps() with an integer, you can define a specific number of steps before reaching the end. The state of the element will not vary gradually, but rather jump from state to state in separate instants

Output: Transition-timing-function: Steps

Transitioning two or more properties

What if we want to apply two or more properties to an element? We can do this by writing each property value with commas separating them.

Let's understand the solution using this example

Example

Code:

Output: Transitioning Two or More Properties

Here, we have transitioned two properties width and height using the transition-property: width, height; statement.

Transitioning in vs Transitioning out

What if we want the properties to transition in and out differently?

Let's see the example below for a better understanding of the solution

Suppose we created a button and applied transitions on it like mentioned below:

Output: The output of a button using CSS transitions

Transitioning in vs Transitioning out

Notice the time duration taken to change back from blue to red, it's 1s because the transition duration of triggering class overrode that of the original property (2s).

Application of Transitions

  • From creating a simple "Hover me" button to implementing some amazing animations, CSS Transitions almost covers everything.
  • It keeps the control of time duration before, after, and during the transition.
  • It can control the speed of transitions during CSS Property changes
  • Combining CSS transitions and animations, we can more complex and sophisticated animations, eg. Slider transitions- It's often used as part of an image gallery.

Conclusion

  • CSS Transitions is a tool that allows us to manipulate elements from the initial to the final state.
  • CSS transitions are a very simple and easy way to create smooth animations.
  • It’s much lighter and faster than Javascript animations.
  • CSS properties specify the transition effect we want to apply to our element.
  • The four Transition properties - are transition property, duration, timing function, and delay`.
  • The Shorthand Transition property that allow to write multiple properties in a transition by separating them with commas.