我有一个html页面,可以同时激活三个svg路径。
@keyframes draw {
100% {
stroke-dashoffset: 1;
}
}
.path {
stroke-dasharray: 555;
stroke-dashoffset: 555;
-webkit-animation: draw 19s normal linear forwards;
-moz-animation-name: draw 3s normal linear forwards;
-o-animation-name: draw 3s normal linear forwards;
animation-name: draw 3s normal linear forwards;
}

<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>
&#13;
我如何对动画进行排序i,在完成第一条路径后设置第二条路径,在第二条路径后设置第三条路径。
答案 0 :(得分:1)
您可以使用animation-delay
来获取动画序列
Stack Snippet
@keyframes draw {
100% {
stroke-dashoffset: 1;
}
}
.path {
stroke-dasharray: 555;
stroke-dashoffset: 555;
animation: draw 3s linear forwards;
}
.path:nth-child(2) {
animation-delay: 1s;
}
.path:nth-child(3) {
animation-delay: 2s;
}
&#13;
<svg class="multipath" version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 200 200" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 21.079449,129.62288 c 33.842653,-15.80707 -32.075893,-17.10715 0,0"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="M 29.259532,121.44279 C 61.098099,135.68206 62.642648,115.18396 41.844279,94.385593 36.3407,88.882014 10.779265,91.868643 18.5625,91.868643 c 18.104688,0 27.15088,-5.255721 37.754236,-15.101694"/>
<path class="path" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" d="m 55.058262,119.55508 c 19.137979,21.06152 26.855914,6.64597 25.169494,-22.023302"/>
</svg>
&#13;