才入门的新手想做一个类似WINCC做一个流动的水管道
我现在做了一个这样的流动管道一样的动画，但是希望满足几个条件才让它动起来，有大神指导一下吗？
看了蚂蚁线，就引用了那个代码，但是代码一开始就是运动的，我试了用隐藏，还是没有效果，
.shuguandao-l16 {
width: 1px;
height: 55px;
padding: 0px;
border: 2px solid transparent;
background-image:
linear-gradient(rgb(249, 250, 252),rgb(252, 248, 248)),
repeating-linear-gradient(-45deg, white 0, rgb(3, 47, 129) 50%, white 0, rgb(244, 245, 241) 0);
background-size: 40px 40px;
background-clip: padding-box,border-box;
background-position: 0;
animation: ants 5s linear infinite;
}
@keyframes ants{
to{
background-position: 100%;
}
}
.shuguandao-h16 {
width: 1px;
height: 65px;
padding: 0px;
border: 2px solid transparent;
background-image:
linear-gradient(rgb(249, 250, 252),rgb(252, 248, 248)),
repeating-linear-gradient(-45deg, white 0, rgb(110, 129, 3) 50%, white 0, rgb(244, 245, 241) 0);
background-size: 40px 40px;
background-clip: padding-box,border-box;
background-position: 0;
animation: ants 5s linear infinite;
animation-direction:reverse;
}
@keyframes ants{
to{
background-position: 100%;
}
}
</style>
<!--4并机组到冷库左到右管道-->
<span id="guandao" class="guandao-l3" style="position: absolute; left: 50px; top: 760px;"></span>
<span id="guandao" class="guandao-h3" style="position: absolute; left: 40px; top: 770px;"></span>
<!--蒸发冷到机组管道-->
<span class="guandao-l33" style="position: absolute; left: 210px; top: 230px;"></span>
<span class="guandao-h33" style="position: absolute; left: 210px; top: 250px;"></span>
<span class="guandao-l33" style="position: absolute; left: 840px; top: 230px;"></span>
<span class="guandao-h33" style="position: absolute; left: 840px; top: 250px;"></span>
以上是大概的代码，下面是动画条件：
网上说的隐藏方法，我试了，模拟打开还是流动的，i是做服务器获取过来的变量对应值，还在一边看手册，一边折腾，不知道有没有人可以带带，很想认真的学一下WEB前端，如果这个方式不行，也可以另外的方式，我希望我能看懂再用。
这种动画一般都是用<canvas>来做的，css太局限了，有一些效果做不出来。
你可以去看看用<canvas>做动画的教程资料。
您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～
ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632
非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！
速戳参与调研>>>https://t.csdnimg.cn/Kf0y