How to reverse animation on mouse out after hover

Question

This is exactly what I want to achieve (animation starts when I hover and reveses after I hover off). I just do not want the animation start until I hover over the object. In code the animation starts right after refreshing.

.class {
  animation-name: out;
  animation-duration: 2s;
  /* Safari and Chrome: */
  -webkit-animation-name: out;
  -webkit-animation-duration: 2s;
}
.class:hover {
  animation-name: in;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  /* Safari and Chrome: */
  -webkit-animation-name: in;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}
@keyframes in {
  from {
    transform: rotate(50deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes in
/* Safari and Chrome */

{
  from {
    transform: rotate(50deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes out {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes out
/* Safari and Chrome */

{
  from {
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0deg);
  }
}

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

Answer 1

You can get rid of the animations and just add transform and transition properties directly on the class like this:

.class {
  transform: rotate(0deg);
  transition: transform 2s;
}

.class:hover {
  transform: rotate(360deg);
  transition: transform 5s;
}

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