**Transitions** in CSS are a way of customizing *element's animation properties*. Instead of having a property (e.g. size of an element) change immediately in one step, the element can be caused to change its property slowly, over time, resulting in a smooth animation.

# Syntax

CSS transitions are controlled using the `transition` property. The default syntax to define a `transition` on a `<ele>` might look like this:

``` css
ele {
    transition: <property> <duration> <timing-function> <delay>;
}
```

The `transition` property has different sub-properties that can be used to individually control the component transitions.



.box {
  	text-align: center;
    background-color: #FF8882;
    font-size: 30px;
	  color: #45597E;
    transition-property: width height background-color font-size;
    transition-duration: 1.5s;
    transition-timing-function: ease-in-out;
  	transition-delay: 1s;
    padding: 20px;
}
.updatedBox {
  	text-align: center;
    transform: rotate(-360deg);
    background-color: #FCE3DE;
    color: #B1A9D4;
    font-size: 50px;
    transition-property: width height background-color font-size;
    transition-duration: 4s;
    transition-timing-function: ease-in-out;
    padding: 20px;
}


<html>
 <head>
 </head>
 <body>
    <div class="parent" style = "margin:0 auto; width: 250px; height:125px; float">
      <div class="box"> Educative! </div>
    </div>
 </body>
</html>

codemirror

## Example

Have a look at the example transition animation of a `div` element given below.

- `transition-property`: *Width*, *height*, *background-color*, and *font-size* has been applied to the transition property on. These properties of the `box` elements animate during the transition.

- `transition-duration`: This is how long the animation lasts for. You might notice the difference in the forward and backward animation due to different delay duration for both in the CSS.

- `transition-timing-function`: The transition timing function for both forward and backward animation is set to be the same (`ease-in-out`).

- `transition-delay`: The transition delay is set only for the backward animation; when the box comes back to its original form.

Feel free to change any of the following properties and notice the effects.

How to use transitions in CSS

Transitions in CSS are a way of customizing element s animation properties. Instead of having a property (e.g. size of an element) change immediately in one step, the element can be caused to change its property slowly, over time, resulting in a smooth animation. Syntax CSS transitions are controlled using the transition property. The default syntax to define a transition on a  might look like this: ele {     transition:    ; }  The transition property has different sub-properties that can be used to individually control the component transitions. 