CSS Transitions

When creating a web animation, sometimes all you need is a smooth change from Point A to Point B. This is where CSS Transitions come in handy. CSS Transitions allow you to change a value over a specified period of time. They only allow for a start and an end, with just a smooth transition in the middle, so if you need more control than that, head over to CSS Animations to learn more about keyframes.

Not sure which animation is best for you? Go back to the How To: An Overview page for more information.

CSS Transitions also require a trigger to run, like a hover or a click. This can be accomplished using CSS or some JavaScript. If you need your animation to run when the page is loaded, you'll need to create a CSS Animation instead. The following transition uses a hover to trigger the effect:

Example

CSS Transitions work by smoothing out the change between two states over a period of time. Without a transition, changing between two states might look something like this:

No Transition

Transition Properties

To create a CSS Transition, you’re required to specify both the property you want to change and the duration of the transition. You can transition any property that has a clear halfway point, for example, heights, widths, and colors, but you can’t for something like font family. You can also specify a few other things:

  • transition-property: Identify the CSS property you want to transition.
  • transition-duration: Define the length of the animation, in seconds.
  • transition-delay: Specify if you want any delay between the trigger event and the start of the transition.
  • transition-timing-function: Defines the speed curve of the transition. The default is ease, but you can adjust for other kinds of motion such as linear. For more information about timing functions, check out the list from W3 Schools.

Anatomy of the Transition Shorthand

Sometimes, typing out all those seperate properties can feel like a waste of time, and it can result in lengthier code than is necessary. For cleaner code, most people rely on a shorthand that puts all of the properties in one line. It's important to note that if you are specifying both a duration and a delay, the duration will always come first.

transition: width 2s linear 1s forwards

Even with shorthand, you can also add a transition to multiple properties at once by setting items off with commas, like this:

transition: width 2s, height 2s, color 2s


Write out the shorthand with height, length of 5 seconds, ease timing-function and color for 3 seconds





Using Transitions

As mentioned above, you can only use transitions if you have an event to trigger the transitions. The simplest way to execute this is by using pseudo-classes like :hover, but of course you can set up JavaScript event listeners for things like onClick.

This means that to use a transition, you have to write CSS to define the initial state and ending state. You’ll add the line of code defining the transition to the initial state.

Here’s an example of what your HTML and CSS would look like if you used a hover to trigger the transition.

See the Pen EJRGeX by Kendall (@kalake96) on CodePen.

This CodePen shows a CSS transition that uses a hover to trigger the transition.

Curious about how to trigger your animation with a click using JavaScript? Check out the JS Animations lesson for more information.


Application Activities

Overall, CSS Transitions are an easy way to create a subtle or delightful effect when a user interacts with an object. Get creative and explore the possibilities with these application activities:

  1. Using CSS Transitions, create a box that changes both color and size when you hover over it.
  2. Create an effect that looks like the ball is rolling across the page. You may want to create this movement using positioning or the transform: translate property. Be sure to think about which timing function makes the most sense for this type of movement.

Sources

Web Designer Depot
CSS Animation Rocks
W3 Schools