Possible to reverse a css animation on class removal?

Question

Essentially what I'm trying to do is give an element a CSS animation when it gains a class, then reverse that animation when I remove the class without playing the animation when the DOM renders.

Fiddle here: http://jsfiddle.net/bmh5g/

As you can see in the fiddle, when you hover the "Hover Me" button, #item flips down. When you mouseoff the hover button, #item just disappears. I want #item to flip back up (ideally using the same animation but in reverse). Is this possible?

$('#trigger').on({   mouseenter: function() {     $('#item').addClass('flipped');   },   mouseleave: function() {     $('#item').removeClass('flipped');   } })

#item {   position: relative;   height: 100px;   width: 100px;   background: red;   -webkit-transform: perspective(350px) rotateX(-90deg);   transform: perspective(350px) rotateX(-90deg);   -webkit-transform-origin: 50% 0%;   transform-origin: 50% 0%; }  #item.flipped {   animation: flipper 0.7s;   animation-fill-mode: forwards;   -webkit-animation: flipper 0.7s;   -webkit-animation-fill-mode: forwards; }  @keyframes flipper {   0% {     transform: perspective(350px) rotateX(-90deg);   }   33% {     transform: perspective(350px) rotateX(0deg);   }   66% {     transform: perspective(350px) rotateX(10deg);   }   100% {     transform: perspective(350px) rotateX(0deg);   } }  @-webkit-keyframes flipper {   0% {     -webkit-transform: perspective(350px) rotateX(-90deg);   }   33% {     -webkit-transform: perspective(350px) rotateX(0deg);   }   66% {     -webkit-transform: perspective(350px) rotateX(10deg);   }   100% {     -webkit-transform: perspective(350px) rotateX(0deg);   } }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='trigger'>Hover Me</div> <div id='item'></div>

Answer 1

I would have the #item start out hidden with the reverse animation by default. Then add the class to give it the animation and show the #item. http://jsfiddle.net/bmh5g/12/

$('#trigger').on({   mouseenter: function() {     $('#item').show();     $('#item').addClass('flipped');   },   mouseleave: function() {     $('#item').removeClass('flipped');   } });

#trigger {   position: relative;   display: inline-block;   padding: 5px 10px;   margin: 0 0 10px 0;   background: teal;   color: white;   font-family: sans-serif; }  #item {   position: relative;   height: 100px;   width: 100px;   background: red;   display: none;   -webkit-transform: perspective(350px) rotateX(-90deg);   transform: perspective(350px) rotateX(-90deg);   -webkit-transform-origin: 50% 0%;   transform-origin: 50% 0%;   animation: flipperUp 0.7s;   animation-fill-mode: forwards;   -webkit-animation: flipperUp 0.7s;   -webkit-animation-fill-mode: forwards; }  #item.flipped {   animation: flipper 0.7s;   animation-fill-mode: forwards;   -webkit-animation: flipper 0.7s;   -webkit-animation-fill-mode: forwards; }  @keyframes flipper {   0% {     transform: perspective(350px) rotateX(-90deg);   }   33% {     transform: perspective(350px) rotateX(0deg);   }   66% {     transform: perspective(350px) rotateX(10deg);   }   100% {     transform: perspective(350px) rotateX(0deg);   } }  @-webkit-keyframes flipper {   0% {     -webkit-transform: perspective(350px) rotateX(-90deg);   }   33% {     -webkit-transform: perspective(350px) rotateX(0deg);   }   66% {     -webkit-transform: perspective(350px) rotateX(10deg);   }   100% {     -webkit-transform: perspective(350px) rotateX(0deg);   } }  @keyframes flipperUp {   0% {     transform: perspective(350px) rotateX(0deg);   }   33% {     transform: perspective(350px) rotateX(10deg);   }   66% {     transform: perspective(350px) rotateX(0deg);   }   100% {     transform: perspective(350px) rotateX(-90deg);   } }  @-webkit-keyframes flipperUp {   0% {     -webkit-transform: perspective(350px) rotateX(0deg);   }   33% {     -webkit-transform: perspective(350px) rotateX(10deg);   }   66% {     -webkit-transform: perspective(350px) rotateX(0deg);   }   100% {     -webkit-transform: perspective(350px) rotateX(-90deg);   } }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id='trigger'>Hover Me</div> <div id='item'></div>

Answer 2

Another approach, rather than using display: none, is to suppress the reverse animation with a class on page load, and then remove that class with the same event that applies the normal animation (eg: flipper). Like so (http://jsfiddle.net/astrotim/d7omcbrz/1/):

CSS - in addition to the flipperUp keyframe posted by Blake above

#item.no-animation  {   animation: none; } 

jQuery

$('#trigger').on({     mouseenter: function(){         $('#item').removeClass('no-animation');         $('#item').addClass('flipped');     },     mouseleave: function(){         $('#item').removeClass('flipped');     } })