CSS3 Transitions

CSS3 Transitions are a way to animate changes to CSS properties over time, creating smooth and visually appealing effects. Some of the most commonly used transition properties in CSS3 are:

1. transition-property: This property specifies the CSS property that the transition effect will be applied to. For example, you can transition the width, height, background-color, etc.

2. transition-duration: This property sets the duration of the transition effect, in seconds or milliseconds.

3. transition-timing-function: This property defines the rate at which the transition will progress over the duration. Some common timing functions include linear, ease, ease-in, ease-out, and ease-in-out.

4. transition-delay: This property sets the time that should elapse before the transition starts. The delay can be set in seconds or milliseconds.

5. transition: This is a shorthand property that allows you to specify all of the transition properties in a single line.

Transition Shorthand 

Using transition shorthand property you can write all transition property in one line .

selector{
    transition: property duration timing-function delay|initial|inherit;
}

Create Transitions In Css

Example of css transition property , transition is occur when change of width of button when hover on it. It looks smoothly change.

.btn{
    width: 100px;
    height: 60px;
    padding: 5px 10px;
    background: linear-gradient(10deg ,green,yellow);
    border-style: none;
    outline: none;
    cursor: pointer;
    transition-property: all;
    /* transition-delay: 1s; */
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
}

Transition-Property

transition-property is type of effect of transition of change of some specific css property. such as widht or height.

.btn{
    transition-property: all;
    transition-property:unset;
    transition-property:none;
    transition-property:width;
}

Transition-Timing-Function

transition-timing-function is type of effect of transition.

.btn{
    transition-timing-function: ease;
    transition-timing-function: ease-in ;
    transition-timing-function: ease-in-out;
    transition-timing-function: linear;
    transition-timing-function:cubic-bezier(1, 0, 0, 1);
}

Transition Duration

transition duration is allow you to set the time to complete the transition . You can specify the time in milliseconds or seconds.

.btn{
   transition-duration: 0.8s;   
}

Transition Delay

transition delay is allow you to set the time to start the transition after some delay. You can specify the time in milliseconds or seconds.

.btn{
   transition-delay: 0.2s;   /*transition will appear after 0.2s */
}

---