Skip to main content

CSS Transitions: Create Smooth and Stunning Web Animations

CSS Transitions are used to create smooth animations and effects when a CSS property changes its value over time. With transitions, you can specify which CSS properties you want to animate, how long the animation should take, and how the animation should behave.

The syntax for a CSS Transition is as follows:

selector {
  transition: property duration timing-function delay;
}
  • selector: the element you want to apply the transition to
  • property: the CSS property you want to animate (e.g. background-color)
  • duration: the length of time the transition should take (e.g. 0.5s, 2s)
  • timing-function: the speed of the animation (e.g. linear, ease-in, ease-out, ease-in-out)
  • delay: the amount of time to wait before starting the animation (e.g. 0s, 1s)

As an example:

Editor

In this example:

  • We're animating the background-color property of the .my-button element when the user hovers over it.
  • We've set a transition property on the .my-button class with a duration of 0.5s and an ease-in-out timing function.
  • When the user hovers over the button, we've set the background-color property to red, which triggers the transition.
  • Because we've specified a transition property on the .my-button class, the background color will smoothly transition from blue to red over a period of 0.5 seconds.

Change Several Property Values​

As an example:

Editor

In this example:

  • We have a box with initial property values of width: 100px, height: 100px, background-color: red, border-radius: 50%, position: relative, and top: 0.
  • We've applied a transition to all of the properties using the "all" keyword in the transition property, which means that any property changes will be transitioned.
  • The transition has a duration of 0.5 seconds and an "ease" timing function.
  • When the box is hovered over, we change several of its properties. The width and height are increased to 150px, the background-color is changed to blue, the border-radius is set to 0%, and the top value is changed to 50px.
  • Because of the transition property applied to the .box class, all of these property changes will be smoothly transitioned over the course of half a second.

transition-timing-function​

transition-timing-function is a CSS property that allows you to define how an element's transition should progress over time. It specifies the rate at which a transition progresses during the transition period.

The transition-timing-function property accepts different values, including:

  • linear: the transition progresses at a constant speed from start to end.
  • ease: the transition starts slowly, accelerates in the middle, and then slows down again at the end.
  • ease-in: the transition starts slowly and accelerates as it progresses.
  • ease-out: the transition starts quickly and slows down as it progresses.
  • ease-in-out: the transition starts slowly, accelerates in the middle, and then slows down again at the end.

Other possible values include step-start, step-end, steps(), and cubic-bezier(), which allow for even more control over the timing of the transition.

As an example:

Editor

Delay the Transition Effect​

You can delay the transition effect using the transition-delay CSS property. This property specifies the amount of time to wait before starting a transition after the property that triggers the transition has changed.

As an example:

Editor

In this example:

  • The div element will transition smoothly over a 1-second period when the mouse hovers over it.
  • However, the transition will not start immediately it will wait for 0.5 seconds before starting.
  • This creates a delay between when the mouse enters the element and when the transition effect begins.

Transition Shorthand​

You can also use the transition shorthand property to set multiple transition-related properties at once.

As an example:

div {
  transition: all 1s ease-in-out 0.5s;
}

div:hover {
  transform: scale(1.5);
}

In this example:

  • The transition property sets the transition-property, transition-duration, transition-timing-function, and transition-delay properties all at once.
  • The 0.5s value for transition-delay causes a delay of half a second before the transition effect starts.

Transition + Transformation​

You can use transitions with transformations to create smooth and dynamic effects when elements change position, size, or shape. The transform property allows you to apply various 2D and 3D transformations to an element, such as translate(), rotate(), scale(), and skew().

As an example:

Editor

In this example:

  • The .box element starts with a blue background color and a width and height of 100 pixels.
  • When the mouse hovers over the box, the transform property is used to rotate the box by 45 degrees and scale it up by 20% over a period of 0.5 seconds.
  • The ease-in-out timing function is used to create a smooth acceleration and deceleration effect.

You can also combine multiple transformations and transitions to create more complex effects.

As an example:

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s ease-in-out;
}

.box:hover {
  transform: rotate(45deg) translateX(50px) skew(10deg) scale(1.2);
}

In this example:

  • The .box element is rotated by 45 degrees, translated along the X-axis by 50 pixels, skewed by 10 degrees, and scaled up by 20% when the mouse hovers over it.
  • The ease-in-out timing function is used to create a smooth and natural effect.