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起，只有Blackberry和UC（Android）浏览器才需要-webkit-前缀。所以新的正确语法将是

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

我试过这个并且它有效然而，我不知道这是否是正确的方法＆gt;贬值还是什么？

SVG动画允许多个关键帧

1 个答案: