CSS Transitions - Detailed Overview

Introduction to CSS Transitions

CSS transitions provide a way to make property changes smooth and gradual. The basic syntax for transitions involves specifying the property to transition, the duration, and the timing function.

• transition-property: The CSS property you want to transition.
• transition-duration: The duration of the transition.
• transition-timing-function: The timing function of the transition.
• transition-delay: The delay before the transition starts.

Basic Transition Example

Here's an example of a basic transition where the background color and transform properties change smoothly:

.transition-example {

    width: 150px;

    height: 150px;

    background-color: #3498db;

    transition: all 0.5s ease;

    display: inline-block;

}


.transition-example:hover {

    background-color: #e74c3c;

    transform: scale(1.2);

}

Scale Transition Example

Here's an example where only the scale property transitions:

.transition-example-scale {

    width: 150px;

    height: 150px;

    background-color: #2ecc71;

    transition: transform 0.5s ease;

    display: inline-block;

}


.transition-example-scale:hover {

    transform: scale(1.5);

}

Opacity Transition Example

Here's an example where only the opacity property transitions:

.transition-example-opacity {

    width: 150px;

    height: 150px;

    background-color: #f39c12;

    transition: opacity 0.5s ease;

    display: inline-block;

}


.transition-example-opacity:hover {

    opacity: 0.5;

}

Circle and Rotation Transition Example

This example demonstrates a square turning into a circle and rotating when hovered:

.transition-example-circle {

    width: 150px;

    height: 150px;

    background-color: #8e44ad;

    border-radius: 0;

    transition: all 0.5s ease;

    display: inline-block;

}


.transition-example-circle:hover {

    border-radius: 50%;

    transform: rotate(360deg);

}

Translation Transition Example

This example demonstrates translating an element horizontally on hover:

.transition-example-translate {

    width: 150px;

    height: 150px;

    background-color: #e67e22;

    transition: transform 0.5s ease;

    display: inline-block;

    transform: translateX(0);

}


.transition-example-translate:hover {

    transform: translateX(150px);

}