为什么仅Safari浏览器中我的首个SVG路径动画结束后回到初始状态

问题原因 #

这是Safari 13+版本仍存在的SVG描边动画兼容性缺陷：其对animation-fill-mode: forwards的优先级计算异常，无法将动画结束后的最终属性权重高于元素的默认样式，因此第一个路径动画结束后会回弹到默认的stroke-dashoffset: 444px状态。

修复方案 #

你可以按照以下步骤调整代码即可解决回弹问题：

• 在.draw类下的.arrow-stroke选择器中直接声明动画最终的静态属性stroke-dashoffset: 0，不单纯依赖fill-mode保留最终状态
• 补全@keyframes的webkit前缀，适配Safari的动画规则解析逻辑
• 显式声明animation-iteration-count: 1，避免Safari对默认值解析异常

修改后完整代码： #

.drawn-connection-line {
    .arrow-stroke {
        stroke-dasharray: 444px;
        stroke-dashoffset: 444px;
    }
    .arrowhead {
        stroke-dasharray: 66px;
        stroke-dashoffset: 66px;
    }    
}
.drawn-connection-line.draw {
    .arrow-stroke {
        stroke-dashoffset: 0; /* 新增：直接写死最终状态 */
        animation-name: draw-connection-line-body;
        -webkit-animation-name: draw-connection-line-body; 
        animation-duration: 0.5s;
        -webkit-animation-duration: 0.5s;
        animation-direction: normal;
        -webkit-animation-direction: normal;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.3,.03,.75,.96);
        -webkit-animation-timing-function: cubic-bezier(.3,.03,.75,.96);
        animation-iteration-count: 1; /* 显式声明播放次数 */
        -webkit-animation-iteration-count: 1;
    }
    .arrowhead {
        stroke-dashoffset: 0; /* 建议同步添加，避免后续出现同类问题 */
        animation-name: draw-connection-line-head;
        -webkit-animation-name: draw-connection-line-head;
        animation-duration: 0.4s;
        -webkit-animation-duration: 0.4s;
        animation-delay: 0.5s;
        -webkit-animation-delay: 0.5s;
        animation-direction: normal;
        -webkit-animation-direction: normal;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(.29,.38,.48,1); 
        -webkit-animation-timing-function: cubic-bezier(.29,.38,.48,1);
        animation-iteration-count: 1;
        -webkit-animation-iteration-count: 1;
    }
} 
@keyframes draw-connection-line-body {
    from {
        stroke-dashoffset: 444px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}
@-webkit-keyframes draw-connection-line-body {
    from {
        stroke-dashoffset: 444px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}
@keyframes draw-connection-line-head {
    from {
        stroke-dashoffset: 66px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}
@-webkit-keyframes draw-connection-line-head {
    from {
        stroke-dashoffset: 66px;
    }
    to {
        stroke-dashoffset: 0px;
    }
}

内容的提问来源于stack exchange，提问作者Andreas Markl