CSS Transitions Examples

CSS3 Transitions

• Link Button with No Transition
• Link Button with Simple Transition Using Ease
• Link Button with Linear Transition
• Link Button with Ease-In Transition
• Link Button with Ease-Out Transition
• Link Button with Ease-In-Out Transition
• Delayed Transition
• Transition with Different Timings

All of the examples will use the same HTML and CSS to create a simple button:

<a href="#" class="button">Hover to Transition</a>
a.button { padding: 0.5em 1em; background-color: #548CCE; color: #fff; }

Link Button with No Transition

a.button:hover { background-color: #ACCFEB; color: #000; }

Hover to Transition

Link Button with Simple Transition Using Ease

#with-trans a.button, #with-trans a.button:hover {
  -webkit-transition-property: background color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: ease;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: ease;
  -o-transition-property: background color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: ease;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: ease;
  transition-property: background color;
  transition-duration: 2.5s;
  transition-timing-function: ease;
}

Hover to Transition

Return to CSS Transitions Tutorial

Link Button with Linear Transition

#linear a.button, #linear a.button:hover {
  -webkit-transition-property: background color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: linear;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: linear;
  -o-transition-property: background color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: linear;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: linear;
  transition-property: background color;
  transition-duration: 2.5s;
  transition-timing-function: linear;
}

Hover to Transition

Return to CSS Transitions Tutorial

Link Button with Ease-In Transition

#easeIn a.button, #easeIn a.button:hover {
  -webkit-transition-property: background color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: ease-in;
  -o-transition-property: background color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: ease-in;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: ease-in;
  transition-property: background color;
  transition-duration: 2.5s;
  transition-timing-function: ease-in;
}

Hover to Transition

Return to CSS Transitions Tutorial

Link Button with Ease-Out Transition

#easeOut a.button, #easeOut a.button:hover {
  -webkit-transition-property: background color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: ease-out;
  -o-transition-property: background color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: ease-out;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: ease-out;
  transition-property: background color;
  transition-duration: 2.5s;
  transition-timing-function: ease-out;
}

Hover to Transition

Return to CSS Transitions Tutorial

Link Button with Ease-In-Out Transition

#easeInOut a.button, #easeInOut a.button:hover {
  -webkit-transition-property: background color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-property: background color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: ease-in-out;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: ease-in-out;
  transition-property: background color;
  transition-duration: 2.5s;
  transition-timing-function: ease-in-out;
}

Hover to Transition

Return to CSS Transitions Tutorial

Delayed Transition

#transDelay a.button, #transDelay a.button:hover {
  -webkit-transition-property: background color;
  -webkit-transition-duration: 2.5s;
  -webkit-transition-timing-function: ease;
  -webkit-transition-delay: 0.5s;
  -moz-transition-property: background color;
  -moz-transition-duration: 2.5s;
  -moz-transition-timing-function: ease;
  -moz-transition-delay: 0.5s;
  -o-transition-property: background color;
  -o-transition-duration: 2.5s;
  -o-transition-timing-function: ease;
  -o-transition-delay: 0.5s;
  -ms-transition-property: background color;
  -ms-transition-duration: 2.5s;
  -ms-transition-timing-function: ease;
  -ms-transition-delay: 0.5s;
  transition-property: background color;
  transition-duration: 2.5s;
  transition-timing-function: ease;
  transition-delay: 0.5s;
}

Hover to Transition

Return to CSS Transitions Tutorial

Transition with Different Timings

#twoTrans a.button, #twoTrans a.button:hover {
  -webkit-transition: background 4s ease, color 1s ease;
  -moz-transition: background 4s ease, color 1s ease;
  -o-transition: background 4s ease, color 1s ease;
  -ms-transition: background 4s ease, color 1s ease;
  transition: background 4s ease, color 1s ease;
}

Hover to Transition

Return to CSS Transitions Tutorial

Discuss in my forum