How to use transitions in css?

CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser.

CSS transitions let you decide which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end).


transition: margin-left 4s, color 1s;

For example :-

.box {

border-style: solid;

border-width: 1px;

display: block;

width: 100px;

height: 100px;

background-color: #0000FF;

-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;

transition: width 2s, height 2s, background-color 2s, transform 2s;


.box:hover {

background-color: #FFCCCC;

width: 200px;

height: 200px;

-webkit-transform: rotate(180deg);

transform: rotate(180deg);


Leave a Reply

Your email address will not be published. Required fields are marked *