SVG CSS animation after hover off - css

Question

I tried several ways to svg animation, but i can't do finish animation after hover off. I have seen some hints on stackoverflow, but in my situation it does not work. In my example I have few options animations in keyframes.
https://codepen.io/GuyDiamond/pen/QBpQze
<rect x="0" y="5" width="100" height="100" fill="red" />
<path id="heart" class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="#fff"/>
<style type="text/css">
svg:hover .heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
transition: .5s;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes rotation {
50% {
transform: rotateY(180deg);
opacity:0;
}
60% {
transform: translate(100px, 0);
opacity:0;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}

Answer 1

You can't do what you want with pure CSS. You need to use JS.
Here's one way, using the animationiteration event, which fires each time the animation loop ends.
// Get the SVG DOM object
var mysvg = document.getElementById("mysvg");
var running = false;
// On hover add the "run" class, which makes the animation run
mysvg.addEventListener("mouseenter", function(evt) {
evt.target.classList.add("run");
running = true;
});
// On mouse out, arrange to remove the "run" class when the animation loop ends
mysvg.addEventListener("mouseleave", function(evt) {
running = false;
});
// When animation loop ends, remove the "run" class if we no longer want to continue running
mysvg.addEventListener("animationiteration", function(evt) {
if (!running) {
evt.target.ownerSVGElement.classList.remove("run");
}
});
.box {
width: 300px;
height: 500px;
}
<div class="box">
<svg id="mysvg" width="100%" height="100%" viewBox="-30 0 250 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<rect x="0" y="5" width="100" height="100" fill="red" />
<path id="heart" class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="#fff"/>
<style type="text/css">
svg .heart {
}
.run .heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes rotation {
50% {
transform: rotateY(180deg);
opacity:0;
}
60% {
transform: translate(100px, 0);
opacity:0;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
</style>
</svg>
</div>

Answer 2

You mean the animation ends suddenly? That's because you've defined the transition in the hover so as soon as the hover ends there's no active transition any more.
.box {
width: 300px;
height: 500px;
}
<div class="box">
<svg width="100%" height="100%" viewBox="-30 0 250 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<rect x="0" y="5" width="100" height="100" fill="red" />
<path id="heart" class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="#fff"/>
<style type="text/css">
svg .heart {
transition: .5s;
}
svg:hover .heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
animation-direction: normal;
animation-fill-mode: forwards; }
#keyframes rotation {
50% {
transform: rotateY(180deg);
opacity:0;
}
60% {
transform: translate(100px, 0);
opacity:0;
}
100% {
transform: translate(0, 0);
opacity:1;
}
}
</style>
</svg>
</div>

Answer 3

By changing the animation-play-state on hover I think it could work
https://codepen.io/dok/pen/ZjKGRE
svg #heart {
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-name: rotation;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: paused;
}
svg .heart:hover #heart {
animation-play-state: running;
}