SVG CSS animation after hover off

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

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

Answer 2

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 3

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>