css - 为什么我的第一个 svg 路径设置仅在 Safari 中恢复为原始状态？

Question

我有一个 svg 中两条路径的笔画动画。基本上当svg进入视口并添加类“draw”时，通过js添加一个类。

它在除 safari 之外的所有浏览器中都能完美运行。我的 safari 版本都是 13+，所以我认为它与前缀无关。我完全糊涂了，因为第二条路径停留在它的最终状态。第一个在动画发生后返回。

那是我的 CSS 代码：

        .drawn-connection-line {
            .arrow-stroke {
                stroke-dasharray: 444px;
                stroke-dashoffset: 444px;
            }
            .arrowhead {
                stroke-dasharray: 66px;
                stroke-dashoffset: 66px;
            }    
        }
        .drawn-connection-line.draw {
            .arrow-stroke {
                animation-name: draw-connection-line-body;
                animation-duration: 0.5s;
                animation-direction: normal;
                -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.3,.03,.75,.96);
            }
            .arrowhead {
                animation-name: draw-connection-line-head;
                animation-duration: 0.4s;
                animation-delay: 0.5s;
                animation-direction: normal;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.29,.38,.48,1); 
            }
        } 
        @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;
            }
        }

“arrow-stroke” 和 “arrowhead” 是 svg 内路径的类。“arrow-stroke”是第一个。

预先感谢您的帮助。

标签： cssanimationsvgpath