Transition generator

CSS3 transitions allows you to change property values smoothly, from one value to another, over a given duration. You can also set a delay and a function. This property is usualy used in :hover state.


Here you can customize the appearance of the result area.


CSS Code to copy

Browser compatibility

To go further

The transition property allows you to modify the values of the CSS properties of an html element, smoothly from one value to another, over a certain duration. This property is often used in :hover state.

Suppose you have a button, identified as MyButton, and defined as below, for which you want the background color to change on mouse over:

<button role="button" id="MyButton">Button</button>

The transition syntax is as follows:

#MyButton {
    width: 100px;
    background-color: #337ab7;
    color: white;
    transition: all 0.3s ease

The first parameter defines which CSS3 property will be affected by the transition. all means that the transition is for any CSS property.
In our case, we could have replaced all with background-color.

The second parameter defines the duration in seconds (s) or milliseconds (ms) of the transition. In our example the duration is 0.3 seconds.

The third parameter (optional) is the speed curve of the transition. Below are some functions that can be used:

  • ease: specifies a transition effect with a slow start, then fast, then slow. It is the default value.
  • linear: specifies a transition effect with the same speed from start to the end.
  • ease-in: specifies a transition effect with a slow start.
  • ease-out: specifies a transition effect with a slow end.
  • ease-in-out: specifies a transition effect with a slow start and a slow end.

Finally, we can also add a delay (optional), in order to shift the transition according to a duration.

Now that the transition is set, we can use a :hover to change the color on mouse over:

#MyButton:hover {    
    background-color: #1e4668;    

It is possible to combine several transitions, on different properties, in order to vary them with different durations or delays. Below is an example:

<div id="MyDiv"> </div>
#MyDiv {
    width: 100px;
    background-color: #337ab7;    
    transition: background-color 0.3s ease, height 2s ease, width 2s 2s ease;    
#MyDiv:hover {    
    background-color: #e86200;
    height: 150px;
    width: 150px;

It should not be forgotten to systematically add the following browser prefixes, in order to remain compatible with as many browsers as possible:

#MyDiv {      
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition all 0.3s ease;   

Given that these 4 lines must be included, using a CSS generator like MakingCSS saves time and avoids errors.

Leave a suggestion