@keyframes add-shadow {
  to {
    box-shadow: 0 0 10px 0 red;
  }
}

.el {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #eee;
  display: grid;
  place-items: center;
  font-size: 10px;

  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  
  &:hover {
    animation: add-shadow 0.3s forwards;
    animation-composition: add;
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}