HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Transitions

❮ Previous Next ❯

CSS Transitions

CSS transitions let you smoothly alter how things look or behave on a webpage for a specific amount of time.

Hover over the box below to experience a smooth CSS animation:

CSS

In this section, you'll discover the following characteristics:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

How to Use CSS Transitions?

To make something change smoothly, you need to tell it two important things:

  • the CSS property you want to add an effect to
  • the duration of the effect

Note: If you don't mention how long the transition should last, it won't do anything, because it will use the default duration of 0.

Here's an example of a red square element with a size of 100 pixels by 100 pixels. This square also has a smooth width change animation that takes 2 seconds to complete.

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

The transition effect begins when the specified CSS attribute (width) changes its value.

Next, we'll set a different width value when someone hovers their mouse over the <p> element.

Example

div:hover {
  width: 300px;
}
Try it Yourself »

Please observe that when you move your mouse away from the object, it will slowly return to its initial appearance.

Change Several Property Values

In this example, we create a smooth change in size for an object. The width change takes 2 seconds, while the height change takes 4 seconds.

Example

div {
  transition: width 2s, height 4s;
}
Try it Yourself »

Specify the Speed Curve of the Transition

The transition-timing-function property tells us how fast a transition happens, like a graph showing its speed.

The "transition-timing-function" property can be set with these values:

  • ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
  • linear - specifies a transition effect with the same speed from start to end
  • ease-in - specifies a transition effect with a slow start
  • ease-out - specifies a transition effect with a slow end
  • ease-in-out - specifies a transition effect with a slow start and end
  • cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

Here is an example that displays various speed curves that can be utilized:

Example

#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;}
Try it Yourself »

Delay the Transition Effect

The transition-delay property tells us how long we should wait (in seconds) before seeing a change in something during a transition.

In the example below, there is a 1-second wait before it begins:

Example

div {
  transition-delay: 1s;
}
Try it Yourself »

Transition + Transformation

In this example, we're making a change to how something transforms, and we're adding a special effect to make that change smoother.

Example

div {
  transition: width 2s, height 2s, transform 2s;
}
Try it Yourself »

More Transition Examples

You can set individual CSS transition properties like this:

Example

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
Try it Yourself »

You can also achieve this using a shorter code with the "transition" property:

Example

div {
  transition: width 2s linear 1s;
}
Try it Yourself »

CSS Transition Properties

Below is a table that shows all the different CSS transition properties:

Property Description
transition A shorter way to set four transition properties all at once using a single property.
transition-delay Indicates how long (in seconds) the transition effect should take.
transition-duration Describes the amount of time a transition effect needs to finish, measured in seconds or milliseconds.
transition-property This tells us which CSS property the transition effect applies to.
transition-timing-function Describes how fast the transition effect happens.
❮ Previous Next ❯