CSS3 Animate Out of: Hover

CSS ONLY Hover over button animate, hover out animate

It's possible without animations. Just use transform.

Example:

button{
    transform: scale(1);
    transition: transform ease 1s;
} 

button:hover{
    transform: scale(0.89);
}

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

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>

Reverse CSS animation on :hover

Instead of using reverse I just created another animation which is the reverse of your current one.

I did it likes this: http://codepen.io/anon/pen/zoeWLO

div {  -webkit-animation-fill-mode: forwards;  animation-duration: 2s;  animation-name: a;  background-color: #a00;  display: inline-block;  padding: 50px;}
div:hover {  -webkit-animation-fill-mode: forwards;  animation-duration: 2s;  animation-name: ra;}
@keyframes a {  0% {    padding: 50px;  }  100% {    padding: 100px 200px;  }}
@keyframes ra{    0% {       padding: 100px 200px;  }  100% {  padding: 50px; }}

<div></div>

Hover off transition css

Your answer

You have added the transition property on the hover state of the element. Therefore the transition is not applied when you leave the cursor from the element.

.shape1{
    position: absolute;
    background: red;
    top: 512px;
    width: 180px;
    height: 140px;
    transition: .2s ease; /* move this here from :hover */
}

Further information

Besides this you can also add specific properties to the transition. For example, if you only want the height to be animated you could it like this:

.shape1 {
    transition: height .2s ease;
    /* this inly affects height, nothing else */
}

You can even define different transition-times for each property:

.shape1 {
    transition: height .2s ease, background-color .5s linear;
    /* stacking transitions is easy */
}

Finish animation on hover even mouse leave

You need to use Javascript for this, the following snippet is shown using some jQuery, a working example:

$("#rotate").on({
   mouseenter() {
      $(this).addClass("animated"); 
   },
   animationend() {
      $(this).removeClass("animated");  
   },
});

#rotate {
  width: 120px;
  height: 120px;
  background-color: orange;
}

.animated {
  animation: rotating 1s ease 0s 1 normal forwards;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rotate"></div>

Hover animation makes initial animation rerun after mouse out

If you do not want the initial state animation to run again after you mouse out of the hover state and you want the element to return to its previous orientation. You will need to add a class to the foo element using JavaScript and add in CSS for that class that no longer allows that animation to run.

const fooEl = document.querySelector(".foo");

fooEl.addEventListener("mouseleave", () => {
  fooEl.classList.add("stopped");
})

.foo {
  margin: auto;
  margin-top: 100px;
  padding: 1em;
  width: fit-content;
  border: solid 1px black;
  background: red;
  color: white;
  font-size: 2em;
    
  /* The initial animation */
  animation: kf-initial 2s;
}

.stopped {
  animation: none;
}

.foo:hover {
  /* The infinite animation */
  animation: kf-hover 10s infinite;
}

@keyframes kf-initial {
  from {transform: scale(0.2)}
  to {transform: scale(1)}
}

@keyframes kf-hover {
  100% {transform: rotate(1turn)}
}

<div class="foo">
  Hello world
</div>

What is the opposite of :hover (on mouse leave)?

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

The definition of hover is:

The :hover selector is used to select elements when you mouse over
them.

By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}