What are CSS transitions, and how to use them to create smooth animations?

Question

Ashutosh Kumar Verma · Answer

CSS transitions allow changes to CSS properties to happen gradually over a specified period of time, rather than immediately. This can be used to create simple animations such as color changes, size adjustments, or positioning.
To create a transition, you define which properties should change, the duration of the change, and the timing function (for example, ease, linear).
Syntax-
element {
 transition: [property] [duration] [timing-function] [delay];
}
Example-
Creating a button that smoothly changes color when hovered,
and 
andlt;!DOCTYPE html>
andlt;html>
andlt;head>
andlt;meta charset="utf-8">
andlt;meta name="viewport" content="width=device-width, initial-scale=1">
andlt;title>Change button color using cssandlt;/title>
andlt;style>
 .button {
 background-color: blue;
 color: white;
 transition: background-color 0.5s ease;
 }
 .button:hover {
 background-color: green;
 }
andlt;/style>
andlt;/head>
andlt;body>
andlt;button class="button">Hover meandlt;/button>
andlt;/body>
andlt;/html>
and 
Also, Read: 
Explain the box model in CSS and how box-sizing affects it.

interview

What are CSS transitions, and how to use them to create smooth animations?

Ashutosh Kumar Verma

1 Answers

Liked By