css animation how to use “reverse” for a hover and out event?

Answer 1

You have to set the transform as a property as well:

.intern {
  -webkit-transform: scale(1);
  -webkit-animation: in 1s infinite reverse forwards;
}

.intern:hover {
  -webkit-animation: in 1s infinite normal forwards;
}

@-webkit-keyframes in {
  from {
    -webkit-transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.2);
  }
}

Edit: To have a simple effect, you can use transitions instead of keyframes.

.intern {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: scale(1);
  transition: transform 1s;
}

.intern:hover {
  transform: scale(1.2);
}