Question

我尝试了几种制作svg动画的方法，但是悬停后无法完成动画。我看到了一些关于stackoverflow的提示，但是在我的情况下，它不起作用。在我的示例中，关键帧中没有几个选项动画。

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

您是说动画突然结束？这是因为您已经在悬停中定义了过渡，所以一旦悬停结束，就不会再有活动过渡了。

.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 2

纯CSS无法满足您的需求。您需要使用JS。

这是一种使用animationiteration事件的方法，该事件在每次动画循环结束时都会触发。

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

通过更改悬停时的动画播放状态，我认为它可以工作 https://codepen.io/dok/pen/ZjKGRE

LoginPrompt

悬停后的SVG CSS动画

3 个答案: