Possible to reverse a css animation on class removal?

css, html, javascript, jquery

Solution

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>

Problem

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> ```

Original source