There are 3 ways of animation

• Using transition can be applied on :hover, :focus, on class change, on page load, element creation
• Using animation can be applied to various properties using keyframes

using transition

Scale on hover

.element {
  transform: scale(0);
  transition: transform 0.5s ease;
}

.element:hover {
  transform: scale(1);
}

Change background color on hover

.element {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: red;
}

Change height on hover

.element {
  height: 100px;
  transition: height 0.5s ease;
}

.element:hover {
  height: 200px;
}

Change opacity on hover

.element {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.element:hover {
  opacity: 1;
}

Change blur on hover

.element {
  filter: blur(5px);
  transition: filter 0.5s ease;
}

.element:hover {
  filter: none;
}

Change background color on focus

.element {
  transition: background-color 0.3s ease;
}

.element:focus {
  background-color: red;
}

Run transformation on class change

.element {
  transition: transform 0.5s ease;
}

.element.slide-in {
  transform: translateX(0);
}

Change opacity on class change

.element {
  transition: opacity 1s ease;
  opacity: 0;
}

.element.show {
  opacity: 1;
}

Using animation

Slide In when element loads

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.element {
  animation: slide-in 1s ease-in;
}