CSS Transitions

CSS transitions enable you to change property values smoothly over a given duration. This creates a visual effect where properties such as color, size, or position gradually change between two states. Transitions can improve the user experience by adding a touch of polish to interactions.

Transition Properties

• Transition Property: Specifies which properties should transition.
• Transition Duration: Defines the duration of the transition.
• Transition Timing Function: Describes the speed curve of the transition.
• Transition Delay: Sets a delay before the transition starts.

Transition Property

The `transition-property` specifies which CSS properties should transition. You can specify one or more properties.

/* Transition Property Syntax */
transition-property: ;

        

/* Transition Property Example */
.transition-property-example {
    transition-property: background-color, transform;
}

            

Transition Duration

The `transition-duration` property specifies how long the transition should take to complete. It can be set in seconds (s) or milliseconds (ms).

/* Transition Duration Syntax */
transition-duration: ;

        

/* Transition Duration Example */
.transition-duration-example {
    transition-duration: 1s;
}

            

Transition Timing Function

The `transition-timing-function` property describes how the transition progresses over its duration. Common values include `ease`, `linear`, `ease-in`, `ease-out`, and `ease-in-out`.

/* Transition Timing Function Syntax */
transition-timing-function: ;

        

/* Transition Timing Function Example */
.transition-timing-function-example {
    transition-timing-function: ease-in-out;
}

            

Transition Delay

The `transition-delay` property specifies when the transition should start. It can be set in seconds (s) or milliseconds (ms).

/* Transition Delay Syntax */
transition-delay: ;

        

/* Transition Delay Example */
.transition-delay-example {
    transition-delay: 0.5s;
}