Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel