在 chrome 中使用 Snap.svg 错误为“d”值设置动画

Question

您可以通过在 Chrome 和 Safari 中打开 http://cjohn.design 来查看问题。徽标动画应该像在 Safari 中一样一次为一个部分设置动画 - Chrome 动画已过时。

这是运行它的 Snap.svg 函数：

function logo_in() {
    logo.animate ({
        d: p1
    }, 75, mina.easein);
            setTimeout(function() {
                logo.animate ({
                    d: p2
                }, 75, mina.easein);    
            }, 100);
            setTimeout(function() {
                logo.animate ({
                    d: p3
                }, 75, mina.easein);    
            }, 200);
            setTimeout(function() {
                logo.animate ({
                    d: p4
                }, 75, mina.easein);    
            }, 300);
            setTimeout(function() {
                logo.animate ({
                    d: p5
                }, 50, mina.easein);    
            }, 400);
};

变量 p0-p5 是标志动画的 6 个阶段。它默认设置为 p0，并通过 setTimeouts 为每个设置动画。

直到最近才有效。徽标的动画怎么会如此笨拙？

Answer 1

我的 CSS 值

transition: all .8s ease

与动画时间值发生冲突

logo.animate ({
    d: p1
}, **75**, mina.easein);