什么方法可以让鼠标动画在悬停时开始，然后当悬停事件转换回开始而不是快照回来？
@keyframes pulseOne {
0% {
fill: #08AFE6;
}
100% {
fill: white;
}
}
@keyframes pulseTwo {
0% {
fill: #E95AA1;
}
100% {
fill: white;
}
}
@keyframes pulseThree {
0% {
fill: #6DC49C;
}
100% {
fill: white;
}
}
@keyframes pulseFour {
0% {
fill: #F79120;
}
100% {
fill: white;
}
}
@keyframes pulseFive {
0% {
fill: #F7D52E;
}
100% {
fill: white;
}
}
.st0 {
fill: #08AFE6;
}
.st1 {
fill: #E95AA1;
}
.st2 {
fill: #6DC49C;
}
.st3 {
fill: #F79120;
}
.st4 {
fill: #F7D52E;
}
svg:hover .st0 {
animation: pulseOne 0.8s ease 0s alternate infinite forwards;
}
svg:hover .st1 {
animation: pulseTwo 0.8s ease 0.2s alternate infinite forwards;
}
svg:hover .st2 {
animation: pulseThree 0.8s ease 0.4s alternate infinite forwards;
}
svg:hover .st3 {
animation: pulseFour 0.8s ease 0.5s alternate infinite forwards;
}
svg:hover .st4 {
animation: pulseFive 0.8s ease 0.7s alternate infinite forwards;
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 569.3 45.2" style="enable-background:new 0 0 569.3 45.2;" xml:space="preserve">
<g id="Layer_2">
<path class="st0" d="M91.7,4.4c-7.7-2.9-19.2-0.5-22.2,7.8c-2.7,7.4,2.1,14.9,3.2,22.1c0.3,2.3,3.3,4.1,5.7,3.8
c3.8,2.6,9.4,2.9,13.9,2.2c7.8-1.3,15.2-7.8,15.8-15.8C108.7,14.7,100.3,7.6,91.7,4.4z"></path>
<g id="Layer_3">
<path class="st1" d="M182.8,17.7c0.2-0.9,0.4-1.7,0.8-2.6c1-2.6-1.1-5.5-3.5-6.2c-2.8-0.8-5.2,0.9-6.2,3.5
c-1.2,3.1-1.6,6.5-1.7,9.8c0,2.7,2.3,5,5,5h3.5c2.7,0,5-2.3,5-5C185.8,20.2,184.5,18.5,182.8,17.7z"></path>
</g>
<g id="Layer_4">
<path class="st2" d="M301.6,9c-3.5-5-9.5-7.7-15.6-6.9c-11.9,1.6-21.9,15.1-18.3,26.9c2,6.5,8.8,11.1,15.3,11.9
c7.3,0.8,14-2.5,19.7-6.9c1.7-1.3,2.3-3.2,2.1-4.9c0.9-1.1,1.1-2.3,0.9-3.5c0.1-0.3,0.2-0.7,0.3-1C307.1,19.6,304.5,13,301.6,9z"></path>
</g>
<g id="Layer_5">
<path class="st3" d="M336.1,11.6c-1.6-6.9-10.3-8.5-16.1-7.2c-3.2,0.7-4.5,4.6-3,7.3c0.9,1.6,1.1,2.7,0.5,4.6
c-0.8,2.6,0.9,5.4,3.5,6.2c0.5,0.1,1.1,0.2,1.6,0.1c0.1,0,0.2,0,0.3,0c3.3,0.1,7.2-0.2,9.9-2.3C335.5,18.2,336.9,15.2,336.1,11.6z
"></path>
</g>
<g id="Layer_6">
<path class="st4" d="M543.3,3.2c-4.1,0.4-5.6,4.6-4.4,7.4c-0.6,0.9-1,2.1-1.1,3.1c-0.5,7-0.5,14,0,21c0.2,3.3,3,5.5,6.3,4.8
c9-2,20.5-4.1,21.1-15.6C565.7,13.5,553.7,2.3,543.3,3.2z"></path>
</g>
</g>
<g id="Layer_1">
<g>
<path d="M14.9,6.4v38.2h-6V6.4H0V0.7h24.2v5.6H14.9z"></path>
<path d="M55.6,44.5V25.7h-21v18.8h-6V0.7h6V20h21V0.7h6v43.8H55.6z"></path>
<path d="M87.7,45.2c-12.5,0-22.5-9.5-22.5-22.7C65.2,9.7,74.8,0,87.4,0c13.6,0,22.7,9.9,22.7,22.6
C110.1,35.3,100.1,45.2,87.7,45.2z M87.5,5.9c-9.5,0-16,7-16,16.6c0,9.7,7.6,16.9,16.3,16.9c8.6,0,16.1-6.5,16.1-17
C103.9,12.9,97.1,5.9,87.5,5.9z"></path>
<path d="M151.9,44.5V12.3c0-0.8,0.1-1.7,0.1-1.7s-0.4,0.7-0.6,1l-13.7,18.5h-2.4l-13.9-18.1c-0.2-0.3-0.6-1-0.6-1s0.1,0.8,0.1,1.6
v31.7h-6V0.7h5.1l16.5,21.4l16-21.4h5.3v43.8H151.9z"></path>
<path d="M191.2,44.5l-5.3-14.2h-14l-5.3,14.2h-6.4l16.8-43.8h3.8l16.9,43.8H191.2z M179.2,12.5c-0.2-0.5-0.4-1.2-0.4-1.2
s-0.2,0.7-0.3,1.1L174,24.7h9.8L179.2,12.5z"></path>
<path d="M212.5,45.2c-4.4,0-8.8-1.1-12.8-4.4l3.4-4.6c2.3,2.1,6.1,3.2,9.1,3.2c4.4,0,7.5-2,7.5-6.1c0-3.7-3.4-5.8-7.3-7.7
c-6.2-3.2-12.6-5.9-12.6-14.3c0-6.5,4.8-11.3,12.7-11.3c4.4,0,8.4,1.3,11.8,3.7L221,8.6c-2.7-2-5-2.8-8.6-2.8
c-3.4,0-6.3,1.7-6.3,5c0,4.7,4.2,6.4,9.6,9.1c5,2.5,10.3,5.6,10.3,13C225.9,40.8,219.8,45.2,212.5,45.2z"></path>
<path d="M247.6,6.4v14h14.7V26h-14.7v18.5h-6V0.7h21.6v5.6H247.6z"></path>
<path d="M287.8,45.2c-12.5,0-22.5-9.5-22.5-22.7c0-12.8,9.5-22.5,22.2-22.5c13.6,0,22.7,9.9,22.7,22.6
C310.1,35.3,300.1,45.2,287.8,45.2z M287.5,5.9c-9.5,0-16,7-16,16.6c0,9.7,7.6,16.9,16.3,16.9c8.6,0,16.1-6.5,16.1-17
C303.9,12.9,297.2,5.9,287.5,5.9z"></path>
<path d="M337.4,44.5l-17.7-20.5v20.5h-6V0.7h14.2c8.2,0,13.6,5.8,13.6,12.9c0,7-5.9,12.5-12.5,12.5l16.1,18.4H337.4z M326.8,6.4
h-7.1v15.1h7c5.4,0,8.5-3.4,8.5-8C335.2,10.4,332.5,6.4,326.8,6.4z"></path>
<path d="M357.8,45.2c-4.4,0-8.8-1.1-12.8-4.4l3.4-4.6c2.3,2.1,6.1,3.2,9.1,3.2c4.4,0,7.5-2,7.5-6.1c0-3.7-3.4-5.8-7.3-7.7
c-6.2-3.2-12.6-5.9-12.6-14.3c0-6.5,4.8-11.3,12.7-11.3c4.4,0,8.4,1.3,11.8,3.7l-3.2,4.9c-2.7-2-5-2.8-8.6-2.8
c-3.4,0-6.3,1.7-6.3,5c0,4.7,4.2,6.4,9.6,9.1c5,2.5,10.3,5.6,10.3,13C371.2,40.8,365.1,45.2,357.8,45.2z"></path>
<path d="M392.1,24.2v20.3h-6V24.2L371,0.7h7l10.6,16.4c0.2,0.4,0.7,1.3,0.7,1.3s0.4-0.8,0.7-1.3l10.6-16.3h6.8L392.1,24.2z"></path>
<path d="M423.4,6.4v38.2h-6V6.4h-8.9V0.7h24.2v5.6H423.4z"></path>
<path d="M464,44.5V25.7h-21v18.8h-6V0.7h6V20h21V0.7h6v43.8H464z"></path>
<path d="M488,44.5V0.7h6v38.2h16.6v5.6H488z"></path>
<path d="M521.1,6.4v38.2h-6V6.4h-8.9V0.7h24.2v5.6H521.1z"></path>
<path d="M545.4,44.5h-10.6V0.7h11.2c14.9,0,23.4,9.8,23.4,21.8C569.3,34.7,560.4,44.5,545.4,44.5z M545.8,6.1h-5v33h3.9
c13,0,18.4-8.4,18.4-16.6C563.1,13.6,556.3,6.1,545.8,6.1z"></path>
</g>
</g>
</svg>
悬停在标题上。
svg{
&:hover{
.st0{ animation: pulseOne 0.8s ease 0s alternate infinite forwards;}
}
}
@keyframes pulseOne {
0% { fill: #08AFE6; }
100% { fill: white; }
}