CSS Transitions

By /

In this chapter, you will learn how to use CSS Transitions to make changes look smooth instead of happening suddenly. For example, when you move your mouse over a button, its color can change slowly instead of changing immediately. This creates a smoother and more interactive experience. Let’s understand CSS transitions step by step.

What is a CSS Transition?

A CSS transitions allows a CSS property to change gradually over a specific amount of time. Without a transition, a change happens instantly.

For example:

button:hover {
  background-color: blue;
}

When you move your mouse over the button, the background color changes immediately.

With a transition:

button {
  transition: background-color 0.5s;
}

The color changes smoothly over 0.5 seconds.

1. The transition Property

The transition property is used to create a smooth change between two states.

For example:

.box {
  transition: background-color 0.5s;
}

This means:

  • background-color is the property that will change.
  • 0.5s is the time taken for the change.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Transition</title>

  <style>
    .box {
      width: 200px;
      padding: 30px;
      background-color: lightblue;
      transition: background-color 0.5s;
    }

    .box:hover {
      background-color: blue;
    }
  </style>
</head>

<body>

  <div class="box">
    Move your mouse here
  </div>

</body>
</html>

When you move your mouse over the box, its background color changes smoothly.

2. Transition Duration

The transition duration decides how long the transition takes. You can use seconds (s) or milliseconds (ms). For example:

transition-duration: 1s;

This transition takes one second. You can also use:

transition-duration: 500ms;

This transition takes 500 milliseconds.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Transition Duration</title>

  <style>
    .box {
      width: 200px;
      padding: 30px;
      background-color: lightgreen;
      transition-duration: 1s;
    }

    .box:hover {
      background-color: green;
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

The background color will take one second to change.

A transition needs a property that changes. In this example, the background-color changes when you hover over the box.

3. CSS Transition Property

The transition-property property tells CSS which property should change smoothly. For example:

.box {
  transition-property: background-color;
  transition-duration: 0.5s;
}

Only the background-color will have a smooth transition.

You can also transition other properties, such as:

transition-property: width;

or:

transition-property: transform;

Example

<!DOCTYPE html>
<html>
<head>
  <title>Transition Property</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      transition-property: width;
      transition-duration: 0.5s;
    }

    .box:hover {
      width: 300px;
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

When you hover over the box, its width changes smoothly.

4. Transition Timing Function

The transition-timing-function controls how the transition changes over time. The commonly used values are:

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

ease

transition-timing-function: ease;

The transition starts slowly, becomes faster, and then slows down again. This is the default value.

linear

transition-timing-function: linear;

The transition moves at the same speed from start to finish.

ease-in

transition-timing-function: ease-in;

The transition starts slowly and becomes faster.

ease-out

transition-timing-function: ease-out;

The transition starts faster and slows down at the end.

ease-in-out

transition-timing-function: ease-in-out;

The transition starts slowly, becomes faster in the middle, and slows down at the end.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Transition Timing Function</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      transition-property: width;
      transition-duration: 1s;
      transition-timing-function: ease-in-out;
    }

    .box:hover {
      width: 300px;
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

Try changing ease-in-out to other timing values and notice the difference.

5. Transition Delay

The transition-delay property adds a delay before the transition starts. For example:

.box {
  transition-delay: 1s;
}

This means the transition will wait for one second before starting.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Transition Delay</title>

  <style>
    .box {
      width: 200px;
      padding: 30px;
      background-color: lightyellow;

      transition-property: background-color;
      transition-duration: 0.5s;
      transition-delay: 1s;
    }

    .box:hover {
      background-color: orange;
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

After moving your mouse over the box, the color will wait for one second before changing.

6. Transition Shorthand

Instead of writing multiple transition properties separately, you can use the transition shorthand property. For example:

.box {
  transition:
    background-color 0.5s ease-in-out 0.2s;
}

The order is usually:

transition: property duration timing-function delay;

For example:

transition: width 1s ease 0s;

You don’t always need to include every value.

A commonly used example is:

transition: 0.3s;

This applies a transition duration of 0.3 seconds to properties that can transition. However, it is usually better to specify the property you want to animate. For example:

transition: background-color 0.3s ease;

7. Transitioning Multiple Properties

You can apply transitions to multiple properties. For example:

.box {
  transition:
    background-color 0.5s,
    width 0.5s;
}

Now both the background color and width can change smoothly.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Multiple CSS Transitions</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightblue;

      transition:
        width 0.5s,
        background-color 0.5s;
    }

    .box:hover {
      width: 250px;
      background-color: blue;
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

Both changes will happen smoothly.

8. Using transition: all

You can use:

transition: all 0.5s;

This tells CSS to apply a transition to all properties that change.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Transition All</title>

  <style>
    .box {
      width: 150px;
      padding: 30px;
      background-color: lightgreen;

      transition: all 0.5s;
    }

    .box:hover {
      width: 250px;
      background-color: green;
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

For simple examples, transition: all can be useful. However, when building larger websites, it is often better to specify the properties you want to transition. This gives you more control.

9. A Practical Button Example

Transitions are commonly used to make buttons feel more interactive.

<!DOCTYPE html>
<html>
<head>
  <title>Button Transition</title>

  <style>
    .button {
      padding: 12px 25px;
      border: none;
      background-color: blue;
      color: white;
      font-size: 16px;
      cursor: pointer;

      transition: background-color 0.3s ease;
    }

    .button:hover {
      background-color: darkblue;
    }
  </style>
</head>

<body>

  <button class="button">
    Hover Over Me
  </button>

</body>
</html>

When you move your mouse over the button, its background color changes smoothly.

10. Using Transitions with Hover Effects

Transitions are often used with :hover. For example, you can smoothly change the size of an element.

<!DOCTYPE html>
<html>
<head>
  <title>CSS Hover Transition</title>

  <style>
    .box {
      width: 200px;
      padding: 30px;
      background-color: lightblue;

      transition: transform 0.3s ease;
    }

    .box:hover {
      transform: scale(1.1);
    }
  </style>
</head>

<body>

  <div class="box">
    Hover Over Me
  </div>

</body>
</html>

Here, the box becomes slightly larger when you hover over it.

Quick Recap

  • CSS Transitions make property changes smooth.
  • The CSS transition property is a shorthand for transition properties.
  • You can transition multiple properties at the same time.
  • transition: all applies transitions to all changing properties.
  • Transitions are commonly used with :hover.
  • Transitions in css are useful for buttons, links, cards, and interactive elements.

Frequently Asked Questions (FAQs)

Q1. What are CSS Transitions?

CSS Transitions allow CSS properties to change gradually over a specific period of time. They are commonly used to create smooth effects when an element changes its color, size, position, or other properties.

Q2. Is this CSS Transitions tutorial suitable for beginners?

Yes, this CSS Transitions Tutorial for Beginners is suitable for learners who are new to CSS. It explains transition properties, duration, timing functions, delays, and hover effects using simple examples.

Q3. How to create transition in css?

You can create a CSS transition using the transition property. For example, transition: background-color 0.5s; makes the background color change smoothly over 0.5 seconds.

Q4. What is the CSS transition-duration property?

The transition-duration property controls how long a CSS transition takes to complete. You can use seconds (s) or milliseconds (ms) to set the duration.

Q5. Can I transition multiple CSS properties at the same time?

Yes, you can transition multiple CSS properties by listing them in the transition property. For example, you can smoothly change both an element’s width and background-color at the same time.

Q6. What is the CSS transition property?

The CSS transition property is used to make changes to CSS properties happen smoothly over a specific period of time. It can combine the transition property, duration, timing function, and delay in one shorthand declaration.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top