CSS3 Transitions -CSS


title: CSS3 Transitions

CSS3 Transitions

Using CSS3 Transitions can be useful if you want your app or your web page to be more dynamic and good looking.

Indeed, transitions allow you to change property (width, color, …) values in a smooth way.

The transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, transition-delay, the syntax is the following :

transition: transition-property transition-duration transition-timing-function transition-delay

For example :

transition: width 2s ease-in-out 1s;

Description of the properties

transition-property

Specify the name of property to which you should apply a transition :

  • background-color
  • color
  • width
  • height
  • margin
  • border-radius
  • And so on !

For example :

transition-property: width; /* means the transition applies on the width */

transition-duration

Specify the number of seconds or milliseconds the transition should take :

For example :

transition-duration: 2s /* means the transition effect last 2s */

transition-timing-function

Specify the speed curve of the transition effect. Thus, you can change your transition’s speed over its duration.

Here are the most used values :

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(n, n, n, n)

For example :

transition-timing-function: linear

N.B : All the values above are in fact specifics cubic-bezier. linear, for instance, is equivalent to cubic-bezier(0.25,0.1,0.25,1)

You can experiment and learn more about Cubic Bezier here

transition-delay

Specify in seconds or milliseconds when the transition will start.

For example :

transition-delay: 1s /* means wait 1s before the transition effect start */

How to use transitions ?

You can write a transition in two ways :

Using the shorthand property (transition)

div { width: 200px; transition: all 1s ease-in-out; } div:hover { width: 300px; }

Giving all transition properties a value

div { width: 200px; transition-property: width; transition-duration: 1s; transition-timing-function: ease-in-out; }

N.B : Both examples are equivalent

Examples

Here are some simple pens containing simple transitions :

More Information:

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.