CSS transition Property

Read

Discuss

The transition property in CSS is used to make some transition effects. The transition is the combination of four properties which are listed below:

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

Note: The transition effect can be defined in two states (hover and active) using pseudo-classes like hover or: active or classes dynamically set by using JavaScript.

Syntax:

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

Note: If any of the values are not defined then the browser assumes the default values.

Property Values:

transition-property: It specifies the CSS properties to which a transition effect should be applied.
transition-duration: It specifies the length of time a transition animation should take to complete.
transition-timing-function: It specifies the speed of transition.
transition-delay: It specifies the transition delay or time when the transition starts.

Example: In this example, we are using the above-explained property.

HTML

<!DOCTYPE html>
<html>
   
<head>
    <title>
        CSS transition Property
    </title>
    <style>
        div {
            width: 100px;
            height: 270px;
            background: green;
            transition: width 5s ease-in .2s;
            display: inline-block;
        }
 
        div:hover {
            width: 300px;
        }
    </style>
</head>
 
<body style="text-align:center;">
    <h1>GeeksforGeeks</h1>
    <h2>Transition Property</h2>
    <div>
        <p>transition-property: width</p>
        <p>transition-duration: 5s</p>
        <p>transition-timing-function: ease-in</p>
        <p>transition-delay: .8s</p>
    </div>
</body>
   
</html>