• Set the animaion and time duration of hover state
• Set background color using @keyframes

Syntax:

button:hover {
    animation-name: background-color;
    animation-duration: 500ms;
    }

    @keyframes background-color {
        100% {
        background-color:#4065F3;
    }
}

Examples:

Output:
Initially the button looks like this:

On hovering it changes to this:

• Set the animaion and time duration of hover state
• Set the image size using @keyframes

Syntax:

 img:hover {
       animation-name: breadth;
       animation-duration: 500ms;
     }

      @keyframes breadth {
      50% {
       width: 400px;
      }
      100% {
       width: 600px;
      }
    }

Output:
Initially the size of image is this:

On hovering its size diminishes to this at half duration time:

And then again to original size on completion of duration of time: