Javascript SVG从css中继续播放动画（没有css）

我刚刚学习了使用java脚本制作svg动画。或者只是简单的svg动画。我想推动我的动画，使它更简单。如果您建议我使用linux的svg动画程序或简单的浏览器软件。这是我想要简化的代码

#r1
{-webkit动画：R112s轻松输入输出无限；
-moz动画：R112s轻松输入输出无限；
-o型动画：r1 12s缓进输出无限；
动画：r1 12s轻松输入输出无限；
}
@-webkit关键帧r1{
0% {
显示：无；
不透明度：0；
}
25% {
显示：块；
不透明度：0.25；
}
98% {
显示：块；
不透明度：0.25；
}
100% {
显示：块；
不透明度：0；
}
}
#r2
{-webkit动画：r2 12s轻松进出无限；
-moz动画：r2 12s轻松输入输出无限；
-o型动画：r2 12s缓进输出无限；
动画：r2 12s轻松进出无限；
}
@-webkit关键帧r2{
0% {
显示：无；
不透明度：0；
}
25% {
显示：块；
不透明度：0；
}
50% {
显示：块；
不透明度：0.25；
}
98% {
显示：块；
不透明度：0.25；
}
100% {
显示：块；
不透明度：0；
}
}
#r3
{-webkit动画：r3 12s轻松输入输出无限；
-moz动画：r3 12s轻松输入输出无限；
-o型动画：r3 12s缓进输出无限；
动画：r3 12s轻松进出无限；
}
@-webkit关键帧r3{
0% {
显示：无；
不透明度：0；
}
50% {
显示：块；
不透明度：0；
}
75% {
显示：块；
不透明度：0.25；
}
98% {
显示：块；
不透明度：0.25；
}
100% {
显示：块；
不透明度：0；
}
}
#r4
{-webkit动画：r4 12s轻松输入输出无限；
-moz动画：r4 12s轻松输入输出无限；
-o型动画：r4 12s缓进输出无限；
动画：r4 12s轻松进出无限；
}
@-webkit关键帧r4{
0% {
显示：无；
不透明度：0；
}
75% {
显示：块；
不透明度：0；
}
90% {
显示：块；
不透明度：0.25；
}
98% {
显示：块；
不透明度：0.25；
}
100% {
显示：块；
不透明度：0；
}
}

---

我感觉到了你的痛苦！我尝试了几种不同的SVG动画制作方法。简短的回答，要想对你的选择有一个很好的概述，请参阅（并用谷歌搜索她的一些作品——她太棒了！）

详细回答：

我不认为有很多应用程序可以像GIF或PNG那样为SVG设置动画。即使有，我也不确定动画是否具有一致的浏览器支持，因为它们必须使用SMIL将动画写入SVG代码（如果您阅读上述文章，您就会知道这不再是一个受支持的标准）。如上所述，通过CSS制作动画，我发现即使在Chrome和Firefox之间也不一致，更不用说IE和Edge了。所以我认为最好的选择是一个JavaScript库，它可以保证跨浏览器支持

我开始的时候很好，很有效，但我不喜欢图书馆的“感觉”。它非常像JQuery（事实上，它有点“插入”JQuery的animate（）函数）——当然，如果您喜欢JQuery，您可能会喜欢Velocity。朱利安·夏皮罗（创造者）已经成功了

最近，我换了工作。它非常灵活，我想我可以称之为SVG动画事实上的“行业标准”。我使用Greensock为几个SVG设置了动画。加载程序图标如下所示：

try{
    var elone = document.getElementById('one')
    var eltwo = document.getElementById('two')
    var elthree = document.getElementById('three')
    var elfour = document.getElementById('four')
    TweenMax.to(elone, .7, { attr:{ r: 10, cx: 20, fill: '#aaa' }, repeat: -1, ease: Power2.easeInOut })
    TweenMax.to(eltwo, .7, { attr:{ r: 13, cx: 55, fill: '#fff' }, repeat: -1, ease: Power2.easeInOut })
    TweenMax.to(elthree, .7, { attr:{ r: 10, cx: 90, fill: '#aaa' }, repeat: -1, ease: Power2.easeInOut })
    TweenMax.to(elfour, .7, { attr:{ r: 5, cx: 80, fill: '#222' }, repeat: -1, ease: Power2.easeInOut })
}
catch(err) {
    console.log('GreenSock animation library failed to load or is unsupported; some animations will not work properly.')
}

非常简单——在SVG文件中定义一个引用元素的变量，然后设置它们的动画。您甚至可以创建自定义的缓和曲线（动画末尾的Power2.ease内容），我发现这确实减少了CSS中的关键帧%定义

---

希望这能提供一些方向

除Microsoft浏览器外，所有浏览器都支持SMIL。这将是为了可预见的未来。Chome曾考虑过取消支持，但他们改变了主意。很好的补充——是的，我确实注意到SMIL除了在MS浏览器中外工作得很好。它易于使用，并且允许您在不使用内联SVG的情况下设置动画，这是一种美观、干净的方式。如果您下载预动画SVG，这似乎就是他们正在使用的，如果它适合海报的需要。谢谢你的回答。。它帮助我更进一步：）您可以通过删除所有的

display:none

和display:block`行来简化一些。不需要它们。另外，

-moz-

和

-o-

前缀已经很旧了，不需要了，除非您想支持真正旧版本的FF和Opera。而且，由于您只提供了webkit版本的

@keyframes

，因此它们无论如何都不起作用。见：