html - css animation how to use "reverse" for a hover and out event?

Question

Given this code (http://jsfiddle.net/bzf1mkx5/)

.intern {
    -webkit-animation: in 1s 1 reverse forwards;
}

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

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

<div style = "width : 100px; height : 100px; background-color : red" class ="intern"></div>

Answer 1

Let's first understand what reverse mean

The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, an ease-in timing function becomes ease-out. ^ref

Let's take a basic example to understand:

.box {
  width:50px;
  height:50px;
  margin:5px;
  background:red;
  position:relative;
}
.normal {
  animation: move normal  2s linear forwards;
}
.reverse {
  animation: move reverse 2s linear forwards;
}

@keyframes move{
  from {
    left:0;
  }
  to {
    left:300px;
  }
}

<div class="box normal">

</div>

<div class="box reverse">

</div>