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 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:
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.
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, height 2s, color 2s
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
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.
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:
transform: translateproperty. Be sure to think about which timing function makes the most sense for this type of movement.