css - CSS矩阵动画问题

Question

我最近尝试创建一些矩阵动画。但我注意到了一些奇怪的事情。以下代码在 Firefox、Safari 和 Chrome 上的工作方式不同：

@-moz-keyframes matrix
{
    from 
    { 
       -moz-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
       -moz-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

@-webkit-keyframes matrix
{
    from 
    { 
        -webkit-transform: matrix(-1.0, 0.0, 0.0, -1.0, 0.0, 0.0);
    }

    to 
    { 
        -webkit-transform: matrix(1.0, 2.0, 3.0, 1.0, 0.0, 12.0);
    }
}

有没有办法解决这个问题？

Answer 1

这似乎只是 Gecko 和 Webkit 呈现matrix函数的方式不同，这就是为什么它们仍然具有实验性供应商前缀的原因。我说没有“解决”这个问题的简洁方法，因为它完全取决于渲染引擎，所以你可能只需要修改这些值以获得相同的结果。