Develop Reference

How to repeat keyframe animation of multiple parts of an SVG?

I've created an animation with CSS and an SVG, I'm having different parts of it animate in and out. I want to have it start from the top once it's done.
I have multiple keyframes, since i'm animating different parts of the SVG, and different styles of the animation.
-- I want to repeat the string of animations after they've all ran through.
This is what I have right now: https://codepen.io/megan24689/pen/NZyOdb?editors=1100 (pls check out the animation I have so far)
CSS
.swing-out-right-fwd-1 {
-webkit-animation: swing-out-right-fwd 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 2s both;
animation: swing-out-right-fwd 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 2s both;
}
.swing-in-right-fwd-2 {
-webkit-animation: swing-in-right-fwd 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3.3s both;
animation: swing-in-right-fwd 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 3.3s both;
}
.swing-out-bottom-bck-3 {
-webkit-animation: swing-out-bottom-bck 0.65s cubic-bezier(0.600, -0.280, 0.735, 0.045) 4.6s both;
animation: swing-out-bottom-bck 0.65s cubic-bezier(0.600, -0.280, 0.735, 0.045) 4.6s both;
}
.swing-in-bottom-bck-4 {
-webkit-animation: swing-in-bottom-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 6s both;
animation: swing-in-bottom-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 6s both;
}
.swing-in-top-fwd-5 {
-webkit-animation: swing-in-top-fwd 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) 8s both;
animation: swing-in-top-fwd 0.7s cubic-bezier(0.175, 0.885, 0.320, 1.275) 8s both;
}
.swing-out-left-fwd-6 {
-webkit-animation: swing-out-left-fwd 0.55s cubic-bezier(0.600, -0.280, 0.735, 0.045) 7s both;
animation: swing-out-left-fwd 0.55s cubic-bezier(0.600, -0.280, 0.735, 0.045) 7s both;
}
.swing-out-top-bck-7 {
-webkit-animation: swing-out-top-bck 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 8.3s both;
animation: swing-out-top-bck 0.75s cubic-bezier(0.600, -0.280, 0.735, 0.045) 8.3s both;
}
.swing-in-top-bck-8 {
-webkit-animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 9.7s both;
animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) 9.7s both;
}
#-webkit-keyframes swing-out-right-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
100% {
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
}
#keyframes swing-out-right-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
100% {
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
}
#-webkit-keyframes swing-in-right-fwd {
0% {
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
}
#keyframes swing-in-right-fwd {
0% {
-webkit-transform: rotateY(-100deg);
transform: rotateY(-100deg);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: right;
transform-origin: right;
opacity: 1;
}
}
#-webkit-keyframes swing-out-bottom-bck {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
100% {
-webkit-transform: rotateX(100deg);
transform: rotateX(100deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
}
#keyframes swing-out-bottom-bck {
0% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
100% {
-webkit-transform: rotateX(100deg);
transform: rotateX(100deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
}
#-webkit-keyframes swing-in-bottom-bck {
0% {
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
}
#keyframes swing-in-bottom-bck {
0% {
-webkit-transform: rotateX(-70deg);
transform: rotateX(-70deg);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: bottom;
transform-origin: bottom;
opacity: 1;
}
}
#-webkit-keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#keyframes swing-in-top-fwd {
0% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#-webkit-keyframes swing-out-left-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 1;
}
100% {
-webkit-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 0;
}
}
#keyframes swing-out-left-fwd {
0% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 1;
}
100% {
-webkit-transform: rotateY(-70deg);
transform: rotateY(-70deg);
-webkit-transform-origin: left;
transform-origin: left;
opacity: 0;
}
}
#-webkit-keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
}
#keyframes swing-out-top-bck {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-100deg);
transform: rotateX(-100deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
}
#-webkit-keyframes swing-in-top-bck {
0% {
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}
#keyframes swing-in-top-bck {
0% {
-webkit-transform: rotateX(70deg);
transform: rotateX(70deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 0;
}
100% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: top;
transform-origin: top;
opacity: 1;
}
}

You could make all the animations the same duration and control their timings using percentages rather than animation-delay. This way using infinite will repeat all of them the same way.
A possible way to do that easily would be to use either JavaScript or a preprocessor. Here is an example using Sass (SCSS). This should also let you easily tweak the values of your animation to get the exact result you want. In this example, each group of values in $timings represents in this order: start time, duration, timing function, transform origin, start angle and final angle.
$duration: 10.5s;
$bezier1: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$bezier2: cubic-bezier(0.175, 0.885, 0.320, 1.275);
$timings:
2.0s .75s $bezier1 right 0deg 70deg,
3.3s .60s $bezier2 right -100deg 0deg,
4.6s .65s $bezier1 bottom 0deg 100deg,
6.0s .60s $bezier2 bottom -70deg 0deg,
7.0s .55s $bezier1 left 0deg -70deg,
8.0s .70s $bezier2 top -100deg 0deg,
8.3s .75s $bezier1 top 0deg -100deg,
9.7s .60s $bezier2 top 70deg 0deg;
#for $i from 1 through length($timings) {
$data: nth($timings, $i);
$from: 100% * nth($data, 1) / $duration;
$to: 100% * (nth($data, 1) + nth($data, 2)) / $duration;
$transform: rotate#{if(nth($data, 4) == left or nth($data, 4) == right, Y, X)};
#keyframes anim-#{$i} {
from, #{$from} {
transform: #{$transform}#{'('}nth($data, 5)#{')'};
opacity: if(nth($data, 5) == 0deg, 1, 0);
}
#{$to}, to {
transform: #{$transform}#{'('}nth($data, 6)#{')'};
opacity: if(nth($data, 6) == 0deg, 1, 0);
}
}
.anim-#{$i} {
transform-origin: nth($data, 4);
animation: anim-#{$i} $duration nth($data, 3) infinite alternate;
}
}
Codepen fork
Note: to improve readability I also included prefixfree and got rid of the prefixed versions.
If you don't want to use a preprocessor on your side, you can just grab the generated CSS from Codepen directly ("View Compiled CSS" in the dropdown of the CSS area) or another online tool.

Animation not functioning as it is set

I am wanting text to come out of a bag and in a vertical manner and then do a 90 degree turn, so that the text is in a correct position right where I want it.
Right now, my test goes in a huge circle on my page. It lands where I want it to, but it comes out of the page completely wrong. I created a fiddle, but it is really not doing any justice because it doesn't look mine at all. If there was any way to show what mine was doing I would.
I want it to look like names are being taken from a bag. Just like they would be if you had 10 people in a room pulling names out of a bag.
https://jsfiddle.net/n2o672q3/1/
I have these keyframes set to the fegree I want, so again, I'm not sure why mine do a 360.
#-moz-keyframes spin {
0% {
-moz-transform: rotate(110deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(110deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(110deg);
transform:rotate(110deg);
}
Just image a bird flying up and doing a large circle in the air and that is what mine is doing.
Any idea how I can fix this?

Have you considered the use of transform-origin property?
Take a look at this. Is this what you are trying to achieve?
CSS:
.shuffle_results {
position: relative;
z-index: -1;
font-size: 2em;
-webkit-animation:spin 3s linear;
-moz-animation:spin 3s linear;
animation:spin 3s linear;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
#-moz-keyframes spin {
0% { -moz-transform: translate(0px, 200px) rotate(140deg); }
100% { -moz-transform: translate(0px, 0px) rotate(0deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: translate(0px, 200px) rotate(140deg); }
100% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
}
#keyframes spin {
0% { -webkit-transform: translate(100px, 200px) rotate(140deg); transform: translate(100px, 200px) rotate(140deg); }
100% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); }
}
#paperBag {
position: relative;
bottom: 0px;
left: 0px;
margin-top: 40px;
z-index: 1;
}

Card flip transitions not working properly in IE

I have made an example of a card flip in JSFiddle for AngularJS.
It works perfectly in Chrome.
It works OK in Firefox.
It sort of works in IE, but not properly.
As soon as I remove the perspective css rule it works perfectly (with no perspective). If I add the -webkit- and -ie- rules it still doesn't work. IS THIS A BUG I IE.
I have used the ng-enter and ng-leave to make the transitions etc. Check JSFiddle for full code.
.serviceRoll{
margin:32px;
position: relative;
height:150px;
width:215px;
perspective:800px;
}
.rollInner {
background-color:lightgrey;
padding-top:50px;
height:100px;
width:215px;
text-align:center;
font-size:2em;
border-radius: 16px;
}
.roll {
position: absolute;
}
.roll.ng-enter {
-webkit-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: 1;
}
.roll.ng-enter.ng-enter-active {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.roll.ng-leave {
-webkit-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: -1;
}
.roll.ng-leave.ng-leave-active {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}

Where you have -webkit- also add a css rule for -ms- as well. You have added these rules in for webkit browsers but not for non-webkit browsers. Take a few of your css rules as an example. Something like this -
.roll.ng-enter {
-webkit-transition:0.25s ease all;
-ms-transition:0.25s ease all;
transition:0.25s ease all;
-ms-transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
z-index: 1;
}
.roll.ng-enter.ng-enter-active {
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.roll.ng-leave {
-webkit-transition:0.25s ease all;
-ms-transition:0.25s ease all;
transition:0.25s ease all;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
z-index: -1;
}
You get the idea :)
Hope this helps!

Scaling a element inside an animation with same property

I'm trying to scale an element that's in an animation on hover. My animation consists of three elements
li{
&.current-projects {
-webkit-animation: first 5s infinite ease-in-out;
animation: first 5s infinite ease-in-out;
}
&.secret {
-webkit-animation: second 5s infinite ease-in-out;
animation: second 5s infinite ease-in-out;
}
&.favorite {
-webkit-animation: third 5s infinite ease-in-out;
animation: third 5s infinite ease-in-out;
}
&:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: brightness(80%);
filter: brightness(80%);
}
}
in each of my animations the transform method is called.
#-webkit-keyframes first {
0% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
right: 50%;
top: 0%;
}
33% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
right: 0;
top: 100%;
}
66% {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
top: 100%;
right: 100%;
}
100% {
-webkit-transform: translateX(50%);
transform: translateX(50%);
right: 50%;
top: 0%;
}
}
My problem, is on hover I have set the images to freeze in place on hover of one of them, but I cannot get it to scale. It seems to be from having transforms in my animation (the brightness works but no scale), is there a way I can scale these using css or js and have them actually scale?
http://cdpn.io/oKpBh

I tried out something but I am not sure if this what you wanted: http://codepen.io/nighrage/pen/qywCi/
The animations on the li seem to stop the object from scaling up. So the trick that you can do is add animations on the li and add the background to the a tag and give the link a height and width of 6em.
http://codepen.io/nighrage/pen/ExvHq/
I didnt polish up the code but I am sure that you would be able to do that.

Possible to reverse a css animation on class removal?

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>

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>

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');
}
})

In addition to the answers here, please cache your $(selector)
So you pretty much do this var elements = $(selector); to cache.
Why?! Because if you use the code in the answers on this page as is you will ask the DOM for that same element collection ($('#item')) each time. DOM reading is an expensive operation.
For example, the accepted answer would look something like so:
var item = $('#item');
$('#trigger').on({
mouseenter: function(){
item.show();
item.addClass('flipped');
},
mouseleave: function(){
item.removeClass('flipped');
}
});
Since I've written all this text, might as well answer your question using CSS transitions
I know you asked for a CSS animations example, but for the animation you wanted to do (a card flipping open), it can be easily achieved using CSS transitions:
#item {
width: 70px;
height: 70px;
background-color: black;
line-height: 1;
color: white;
}
#item+div {
width: 70px;
height: 100px;
background-color: blue;
transform: perspective(250px) rotateX(-90deg);
transform-origin: 50% 0%;
transition: transform .25s ease-in-out
}
#item:hover+div {
transform: perspective(250px) rotateX(0);
}
<div id="item"></div>
<div></div>

Its animating down using css so to get it to animate up you need to create a class, say .item-up that does the transformation in the opposite so then you would remove the previous class and add the item-up class and that should animate it up.
I would write you a js fiddle for it but I dont know the syntax well enough.
Basically when you will need:
#keyframes flipper
#keyframes flipper-up //This does the opposite of flipper
and
$('#trigger').on({
mouseenter: function(){
$('#item').removeClass('flipped-up');
$('#item').addClass('flipped');
},
mouseleave: function(){
$('#item').removeClass('flipped');
$('#item').addClass('flipped-up');
}
})
jsfiddle.net/bmh5g/3 courtesy of Jake

CSS solution from MDN and almost supported by all browser
.animation(animationName 10s ease-in-out infinite alternate both running;)

You can make use of the attribute animation-direction to run the same animation in reverse.
If you couple this with one of the many methods described here for restarting an animation- we can start the animation forwards on mouseenter, then on mouseleave we can restart it and play it in reverse.
I don't know how to use jQuery very well, so I chose one of the non-jQuery methods mentioned in the article.
const element_button = document.getElementById('trigger');
const element_item = document.getElementById('item');
element_button.addEventListener("mouseenter", () => {
if (element_item.classList.contains('animate-backwards')) {
element_item.classList.remove('animate-backwards');
void element_item.offsetWidth;
}
element_item.classList.add('animate-forwards');
});
element_button.addEventListener("mouseleave", () => {
element_item.classList.remove('animate-forwards');
void element_item.offsetWidth;
element_item.classList.add('animate-backwards');
});
and
#item.animate-forwards {
animation: flipper 0.7s normal;
-webkit-animation: flipper 0.7s normal;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#item.animate-backwards {
animation: flipper 0.7s reverse;
-webkit-animation: flipper 0.7s reverse;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
Here is a jsFiddle for the above code.

Worked fo me:
1 animation in reverse for the Element (from 100% to 0%)
1 separate animation forwards for the new class (from 0% to 100%)
And toggling that class would work
[1]: https://jsfiddle.net/q7bc4s0f/17/
Upd:
That way animation will play backwards on page load. To solve this you have to ADD new bacwards animation class on event ONCE and then toggle forwards animation class on that event.