color change on button Keyframe Event using css

Color change effect hover button using a keyframes colorchange css, Its multiple color we can use when hover a on button.

@keyframes colorchange {
    0% {
        background-color: #009ee3;
    }
    40% {
        background-color: #6bb8ab;
    }
    75% {
        background-color: #bfe6ad;
    }
    100% {
        background-color: #2a2970;
    }
}

Example demo.html

<Style>
@keyframes colorchange {
    0% {
        background-color: #009ee3;
    }
    40% {
        background-color: #6bb8ab;
    }
    75% {
        background-color: #bfe6ad;
    }
    100% {
        background-color: #2a2970;
    }
}
#processbtn:hover{
      animation: colorchange 0.9s 1 !important;
      background-color: #ff4100 !important;
}
#processbtn{
  background-color: #4d4d4d;
  border-radius: 8px;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-style: normal;
  font-weight: 500;
  line-height: 1.18;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin: 10px 0;
  padding: 12.5px 15px;
  padding: 0.7813rem 0.9375rem;
  text-decoration: none;
  width: 100%;
}
</style>
<button type="button" id="processbtn">color change on button Keyframe Event</button>