.left-svg { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: heartbeatLeft 2s linear infinite; } @keyframes heartbeatLeft { 0% { stroke-dashoffset: 1000; } 20% { stroke-dashoffset: 800; } 40% { stroke-dashoffset: 600; } 60% { stroke-dashoffset: 400; } 80% { stroke-dashoffset: 200; } 100% { stroke-dashoffset: 0; } } 这段代码动画改为从右到左

要将这段代码中的动画改为从右到左，需要对其中的 stroke-dashoffset 属性进行修改。原来的属性值是从左到右逐渐减小，现在需要改为从右到左逐渐增大。可以将原来的属性值取反后再使用，即将 1000 改为 0，将 800 改为 200，将 600 改为 400，将 400 改为 600，将 200 改为 800。修改后的代码如下：

.right-svg {
stroke-dasharray: 1000;
stroke-dashoffset: 0; /* 初始状态，线条不可见 */
animation: heartbeatRight 2s linear infinite;
}

@keyframes heartbeatRight {
0% {
stroke-dashoffset: 0; /* 显示线条的全部 */
}
20% {
stroke-dashoffset: 200; /* 显示线条的前80% */
}
40% {
stroke-dashoffset: 400; /* 显示线条的前60% */
}
60% {
stroke-dashoffset: 600; /* 显示线条的前40% */
}
80% {
stroke-dashoffset: 800; /* 显示线条的前20% */
}
100% {
stroke-dashoffset: 1000; /* 初始状态，线条不可见 */
}
}