Getting Started with CSS Transitions and Animations

                                
For example, you can smoothly change the background color of a button when a user hovers over it:

button {
  background-color: blue;
  transition: background-color 0.5s ease;
}
button:hover {
  background-color: green;
}

                              

                                
Here's how you can define a CSS transition with all four parts:

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s ease-in-out 1s;
}
div:hover {
  width: 200px;
}

                              

                                
Without specifying a duration, the transition is instant:

p {
  color: black;
  transition: color;
}
p:hover {
  color: blue;
}

                              

                                
Different timing functions create different effects:

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: width 2s ease-in;
}
div:hover {
  width: 300px;
}

                              

                                
Adding a delay before a transition starts:

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  transition: width 2s ease 1s;
}
.box:hover {
  width: 200px;
}

                              

                                
Transitioning both width and height together:

.square {
  width: 100px;
  height: 100px;
  background-color: orange;
  transition: width 1s, height 2s;
}
.square:hover {
  width: 200px;
  height: 200px;
}

                              

                                
Using 'all' to transition any changeable property:

.circle {
  width: 50px;
  height: 50px;
  background-color: red;
  transition: all 0.5s ease;
}
.circle:hover {
  width: 100px;
  height: 100px;
  background-color: blue;
}

                              

                                
Using shorthand to simplify transitions:

.box {
  width: 100px;
  height: 100px;
  background-color: pink;
  transition: all 0.3s ease-out;
}
.box:hover {
  width: 150px;
  height: 150px;
}