Creating CSS animations for a smooth transition effect on hovering over element?

Question

Create CSS animations for a smooth transition effect on hovering over element, means while hovering on element the transition should come.

I am unable to create smooth animation/transition effect on hovering, i want to make a smooth and clean hover effect while hovering on element.

Answer 1

Use transition property to add smooth transitions to elements: CSS Transition Property

One example:

.normal {
  width: 100px;
  height: 100px;
  background: #ddd;
  text-align: center;
}

.smooth {
  width: 100px;
  height: 100px;
  background: black;
  color: white;
  text-align: center;
  transition: width 3s;
}

.smooth:hover,
.normal:hover {
  width: 200px;
}

<div class="normal">Normal Transition</div>
<div class="smooth">Smooth Transition</div>

Or you can use CSS animations: CSS Animations

div {
  width: 100px;
  height: 100px;
  background-color: black;
  color: white;
  text-align:center;
}

div:hover {
  animation-name: animation1;
  animation-duration: 3s;
}

@keyframes animation1 {
  from {
    width: 100px;
  }
  to {
    width: 200px;
  }
}

<div>Hover</div>