Loading...

What pieces do we need to get a transition going?

Creating a transition with CSS has two major requirements: the transition property, and at least one property that will take on a new value. First, the transition property is where you declare the property that is to be changed, and how long animating this change is to take. These declarations are paired up by listing the name of the property, and the length of time, expressed in seconds (a whole number or decimal and the letter s). These two pieces of information are separated by a space.

transition: width 3s

You can also assign multiple properties to be a part of the transition. This is done the same way, but you just need to separate the property-time pairings with a comma. This also gives you the opportunity to set a different duration time for each property, if you wish.

transition: width 3s, height 2s

However, the transition property alone won't make a transition happen. Right now, all the element knows is which of its properties are going to be changing. How they're changing, however, hasn't been spelled out. So the next piece we need is the "end" value, or what the value will be at the end of the transition. We'll use our width and height example from above.

The div in our example will have a width of 300px, and a height of 200px. Now, since we're not using JavaScript in this course, our best course of action to demonstrating a transition is to set up a hover pseudo class for this div. The values you add for width and height in this pseudo class will be the end values. With this information added, the transition now has all the knowledge it needs.

<style>
div {
width:300px;
height:200px;
transition: width 3s, height 2s;
}
div:hover {
width:600px;
height:100px;
}
</style>

Move your cursor here.

This is the basic setup of a transition. Declare which properties will transition and how long they'll take, and set a hover pseudo class with the end values for the properties. Now, as a note, if you are not setting different duration times for multiple properties, you can use the keyword "all" instead of a property name. This means the browser is now watching out for changes to any properties for this element. This could make life easier for you, but can also be a drag on processing and loading times since the browser is on the prowl for so much information. So if you are only transitioning one or two properties, the "all" keyword is overkill and should be avoided.