Transitions and Animations in CSS3

 Transitions and Animations in CSS3

Transitions and animations allow you to add movement and interactivity to your web pages. CSS3 introduces several new properties and values that make it easier to create animations and transitions.

html

<button class="btn">Click me</button>

css

.btn {

  background-color: blue;

  color: white;

  border: none;

  padding: 10px;

  transition: background-color 0.5s ease;

}

.btn:hover {

  background-color: red;

}

In this example, we have created a button with a blue background color. We have used the transition property to specify that when the background color changes (on hover), it should do so over a period of 0.5 seconds with an easing effect. This creates a smooth transition from blue to red.