Understanding the CSS 3 transition property syntax

CSS 3 lets you apply simple transition effects to properties. This is superior to styles using javascript since these transitions are inherent to the browser and hence are optimized by default. In this short article, we will quickly try grasp the concept and understand the syntax for applying CSS 3 transitions to your elements.

The simplest way to remember what you need to do for applying CSS transitions is by asking yourself four questions.

Which property do you want to transition?
How long do want the transition to last?
What kind of transition effect would you like to have?
Do you want the transition to begin after a certain delay?

Once you have answered these questions, you can apply your transition effects to an element as such:

.myDiv {
    width: 10px; /* Initial width */
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: 1s;
    transition-delay: 1s;
}

.myDiv:hover {
  width: 40px;
}

The above rule can be read as

If the width of my element is changed, apply the mentioned transition effect.

By defining the transition effect on the element itself, the transition is bidirectional. i.e. in our example above, it will take place on both - when mouse hover takes place and mouse hover ends. You can also specify multiple properties at the same time as shown below.

.myDiv {
    width: 10px; /* Initial width */
    height: 15px;
    transition-property: width, height;
    transition-duration: 2s, 3s;
    transition-timing-function: ease-in, ease-in;
    transition-delay: 1s, 1s;
}

.myDiv:hover {
  width: 40px;
  height: 60px;
}

As a final note, you can use the shorthand technique to apply all effects in a single line;

transition: <property> <duration> <timing-function> <delay>;

Applying the above syntax to our previous example:

.myDiv {
    width: 10px; /* Initial width */
    height: 15px;
    transition: width 2s ease-in 1s,  height 3s ease-out 1s;
}

.myDiv:hover {
  width: 40px;
  height: 60px;
}

Related resources

css3 1 transitions 1