SVG动画允许多个关键帧

Question

我正在使用关键帧来动画我的svg。

我使用关键帧来动画svg文件的多个部分。 某些部件需要与令人兴奋的关键帧相同的动画，但需要额外的动画。而不是复制令人兴奋的关键帧，并添加我需要的部分是否可以允许animation元素具有多个关键帧？

像这样：

@keyframes scaleup { 
0% { 
    stroke: #009AFF; 
    stroke-width:3; 
    stroke-opacity:0; 
} 
40% { 
    stroke: #009AFF; 
    stroke-width:3; 
    stroke-opacity:1; 

} 
50%{ 
    stroke: #009AFF; 
    stroke-width:3; 
    stroke-opacity:0.5; 
} 
75%{ 
    stroke: #000000; 
    stroke-width:3; 
    stroke-opacity:0.5;  
} 
100% { 
    stroke: #000000; 
    stroke-opacity:1; 
    stroke-width:5.012; 
} 
from { 
    transform: scale(0); 
    transform-origin: 50% 50%; 
} 
to { 
    transform: scale(1); 
    transform-origin: 50% 50%; 
} 
} 

以上@keyframe用于通过以下类：

.mouth_outer_line{ 
    animation: scaleup 1s ease-in-out 1 both; animation-delay: 1.6s;  
} 

如果这个动画完成，我想为实例添加的东西。 所以我想创建一个单独的@keyframe我添加我想添加的东西。

可以这样做吗？

Answer 1

一些Googeling后，我发现这个职位： multiple webkit animations

像这样：
您可以用,分隔多个动画，并根据需要设置第二个延迟：

-webkit-animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;
2s在第二个动画中是延迟

由于Chrome 43和Safari 9/9.2,-webkit- p Refix仅适用于Blackberry和UC（Android）浏览器。因此，新的正确的语法是

animation: shrink 2s ease-out, pulsate 4s 2s infinite ease-in-out;

我想这和它的作品。
但是，我不知道这是否是正确的方式来做到这一点>贬值或什么？