How to apply following properties of transition and animation to the Box

Question

I'm trying to apply following properties to the Box.

But not able to understand how to apply them in the form of transition and animation.

Answer 1

You need in CSS:

  transition-timing-function: ease-out;
  animation-duration: 0.3s;

See more about transitions here

The code below is for making an element do something on hover (in this case make the background color red):

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

Also take a look at this stack overflow page where they discuss how to manipulate animations.