在无限循环中链接SVG上的多个CSS动画
我有两个动画svg,有两个单独的动画。我想在一个元素上无限链接它们(将来可能会更多)。我只喜欢CSS 我试着像这个问题一样链接它们,但似乎无限循环更难——或者我的@keyframes(太简单)可能有问题 代码可在此处找到: HTML:在无限循环中链接SVG上的多个CSS动画,css,svg,css-animations,Css,Svg,Css Animations,我有两个动画svg,有两个单独的动画。我想在一个元素上无限链接它们(将来可能会更多)。我只喜欢CSS 我试着像这个问题一样链接它们,但似乎无限循环更难——或者我的@keyframes(太简单)可能有问题 代码可在此处找到: HTML: <?xml version="1.0" encoding="utf-8"?> <div class="svg-container"> <svg version="1.1" id="Layer_1" xmlns="http://
<?xml version="1.0" encoding="utf-8"?>
<div class="svg-container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve">
<g>
<path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
/>
<path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C27.3,12.1,28.4,13.2,29.9,13.2"/>
<path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/>
<path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/>
<path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C13.6,20.5,14.8,21.6,16.2,21.6"/>
<path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853">
<stop offset="0.2597" style="stop-color:#EE3251"/>
<stop offset="1" style="stop-color:#F47529"/>
</linearGradient>
<polyline class="st1" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/>
</svg>
</div>
<div class="svg-container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 35 22" style="enable-background:new 0 0 32.4 21.7;" xml:space="preserve">
<g>
<path class="st0" d="M2.5,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C-0.1,12.1,1.1,13.2,2.5,13.2"
/>
<path class="st0" d="M29.9,13.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C27.3,12.1,28.4,13.2,29.9,13.2"/>
<path class="st0" d="M8,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C5.4,6.2,6.5,7.2,8,7.2"/>
<path class="st0" d="M24.4,7.2c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C21.8,6.2,23,7.2,24.4,7.2"/>
<path class="st0" d="M16.2,21.6c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4
C13.6,20.5,14.8,21.6,16.2,21.6"/>
<path class="st0" d="M16.2,4.9c1.4,0,2.6-1.1,2.6-2.4c0-1.3-1.1-2.4-2.6-2.4c-1.4,0-2.6,1.1-2.6,2.4C13.6,3.8,14.8,4.9,16.2,4.9"/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10.853" x2="32.3588" y2="10.853">
<stop offset="0.2597" style="stop-color:#EE3251"/>
<stop offset="1" style="stop-color:#F47529"/>
</linearGradient>
<polyline class="st2" points="16.2,2.5 24.4,4.9 2.5,10.9 8.1,4.8 16.2,19.2 30.1,10.8 "/>
</svg>
</div>
链接意味着一个在另一个完成时开始。如果它们是无限的,那就没什么用了,所以你需要更清楚地描述你想要的效果。@RobertLongson我想从动画1开始-接着是动画2-然后再从动画1开始,接着是动画2。。。等等所以这是不可能的?动画1将永远运行,所以当动画1结束时,如何启动动画2?我明白了。我得另找一条路。谢谢你的回复!
svg {
width: 20em;
display: block;
margin: 5em auto;
padding: 1rem;
}
.svg-container {
width: 49%;
display: inline-block;
min-width: 21em;
}
g {
cursor: pointer;
}
.st0 {
fill:#EE3251;
}
.st1,
.st2 {
stroke-dasharray: 60;
fill: none;
stroke: url(#SVGID_1_);
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st1 {
animation: dash 4s infinite ease-in-out alternate;
}
.st2 {
animation: dashLong 2500ms infinite linear;
}
@keyframes dash {
from {
stroke-dashoffset: 200;
}
}
@keyframes dashLong {
from {
stroke-dashoffset: 120;
}
}