css transition

# Web Site Writing Basics

# CSS

# trasition

CSS transitions are features in CSS that make changes to properties (properties) of web elements occur smoothly instead of changing them suddenly. You can define Transition properties such as transition-delay, transition-duration, and transition characteristics (transition-timing-function) to control the change of values from one state to another, such as changing the background color gradually when the user hovers (hover) the mouse, to add a good and interesting experience to the user.

Working Principles

Change of status:

CSS transitions work when the properties of an element change in value, such as from a normal state to a hover state or focus.

Default and final values:

Transition determines the default and final values of that property.

Delay and duration:

You can set the change to start, delay, or determine the amount of time required for the change to occur gradually.

Easing Function:

You can determine the speed of change, such as starting fast and slowing down (ease-out) or changing at a linear speed.

How to use

You can define CSS transitions with the features:

Transition-property:

Identify which properties require transitions.

Transition-duration:

Determine the amount of time it takes to change the value.

Transition-delay:

Define a delay before the transition starts.

:

Determine the rate of acceleration of change.

Transitional:

It is a shortened property (shorthand) that combines these properties in one line.

Example of use

Suppose you want the background color of the button to change gently from red to blue when hovering the mouse. You can write the code as follows:

Code

. My-button {

Background-color: red;

Transition: background-color 0.5s ease-out; / * Define to change the background color in 0.5 seconds * /

}

.my-button: hover {

Background-color: blue;

}