Css Transitions | Beginner | Html Css Tutorial

Adding transitions to CSS properties

CSS transitions allow you to change property values smoothly (over a given duration). This tutorial covers how to add transitions to CSS properties to create engaging user experiences.

Key Points:

CSS transitions enable smooth changes between property values.
The transition property is used to specify the duration, timing function, and delay of the transition.
Transitions can be applied to various properties, including color, background-color, width, height, and transform.

Basic Transition Syntax

The basic syntax of a transition includes the transition property followed by the property to transition, the duration of the transition, and optional timing function and delay. Here is an example:


.element {
    transition: background-color 0.5s ease-in-out, transform 0.5s;
}

Applying Transitions

To apply transitions, you need to specify the transition property on the element and define the initial and final states. Here is an example:


.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transition: background-color 0.5s, width 0.5s;
}

.box:hover {
    background-color: blue;
    width: 200px;
}

Hover over me

Transition Properties

The transition property is a shorthand for four transition-related properties:

transition-property: Specifies the CSS property to be transitioned.
transition-duration: Specifies the duration of the transition.
transition-timing-function: Specifies the speed curve of the transition.
transition-delay: Specifies the delay before the transition starts.

Here is an example using individual properties:


.box {
    transition-property: background-color, transform;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

Timing Functions

Timing functions define the speed curve of the transition. Common timing functions include:

ease: Default value. Starts slowly, then fast, then ends slowly.
linear: Same speed from start to end.
ease-in: Starts slowly and accelerates.
ease-out: Starts fast and decelerates.
ease-in-out: Starts slowly, accelerates, then decelerates.

Here is an example:


.box {
    transition: background-color 0.5s ease-in-out;
}

Multiple Transitions

You can specify multiple transitions by separating them with commas. Here is an example:


.box {
    transition: background-color 0.5s, width 0.5s, height 0.5s;
}

Example: Color and Transform Transition

Here is an example that demonstrates a color change and transform transition:


.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transition: background-color 0.5s, transform 0.5s;
}

.box:hover {
    background-color: blue;
    transform: rotate(45deg);
}