Javascript 如何在svg中制作ribbon的垂直波动画？

我的问题是，我想创建一个svg文件（下面提到了代码），就像一个垂直的功能区（已经完成了），现在我想提供一个从上到下的波浪效果，并且将处于连续模式。但它不起作用

@关键帧线程{
从{
行程偏移：200；
不透明度：.5；
}
到{
行程偏移量：2；
不透明度：1；
}
}
.动漫{
行程：200；
动画：线程2s.4s向前无限轻松进出；
}

---

我想你正在寻找类似的东西（如果我错了，请纠正我）：

var svg=document.getElementById（“cups”）；
var s=Snap（svg）；
var ribbon1=捕捉。选择（“#ribbon1”）；
var ribbon2=捕捉。选择（“#ribbon2”）；
var ribbon1Points=ribbon1.node.getAttribute（'d'）；
var ribbon2Points=ribbon2.node.getAttribute（'d'）；
var toRibbon2=函数（）{
ribbon1.设置动画（{d:ribbon2Points}，1000，toRibbon1）；
}
var toRibbon1=函数（）{
ribbon1.设置动画（{d:ribbon1Points}，1000，toRibbon2）；
}
toRibbon1（）
h1{
文本对齐：居中；
}
svg{
显示：块；
保证金：0自动；
}
#色带2{
不透明度：0；
}
svg{
填充物：浅灰色；
}

JS-Bin
您可能希望对尝试创建的波浪效果进行eleborate是@SuperDJ非常感谢@Maharkus，但我想要一些类似波浪效果的动画。就像升起的旗帜一样，是垂直方向的。而且形状一样。我想要这样的东西-