Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Understanding the CSS 3 transition property syntax

CSS 3 lets you apply sim­ple tran­si­tion effects to prop­er­ties. This is supe­rior to styles using javascript since these tran­si­tions are inher­ent to the browser and hence are opti­mized by default. In this short arti­cle, we will quickly try grasp the con­cept and under­stand the syn­tax for apply­ing CSS 3 tran­si­tions to your elements.


The sim­plest way to remem­ber what you need to do for apply­ing CSS tran­si­tions is by ask­ing your­self four questions.

  • Which prop­erty do you want to transition?
  • How long do want the tran­si­tion to last?
  • What kind of tran­si­tion effect would you like to have?
  • Do you want the tran­si­tion to begin after a cer­tain delay?

enter image description here

Once you have answered these ques­tions, you can apply your tran­si­tion effects to an ele­ment 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 ele­ment is changed, apply the men­tioned tran­si­tion effect.

By defin­ing the tran­si­tion effect on the ele­ment itself, the tran­si­tion is bidi­rec­tional. i.e. in our exam­ple above, it will take place on both — when mouse hover takes place and mouse hover ends.

You can also spec­ify mul­ti­ple prop­er­ties 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 short­hand tech­nique to apply all effects in a sin­gle line;

enter image description here

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

Apply­ing the above syn­tax to our pre­vi­ous 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


Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.