javascript - 如何使用多次css transform属性？

Question

基本上我希望图像有时会改变其位置，所以我使用以下代码:

JQUERY:

$(block).delay(2200).css({                
                transform: 'matrix(0.586,0.8,-0.8,0.586,40,40)'
            }).css({
                "transition-duration": "5s"
            }).delay(2200).css({                
                transform: 'matrix(0.866,0.5,-0.6,0.866,0,0)'
            }).css({
                "transition-duration": "5s"
            });

但在第一次转换后没有任何变化。

如何多次使用此 css 属性？ 有没有更好的方法可以达到同样的效果？

Answer 1

为什么不使用 CSS 动画，而不是 JS？它会运行得更快，并且适用于禁用 JS 的人:

.block {
 @animation: myAnimation, 14400ms, forwards, linear;
}

@keyframes myAnimation {
  15.3% { transform: none; }
  50%   { transform: matrix(0.586,0.8,-0.8,0.586,40,40); }
  65.3% { transform: matrix(0.586,0.8,-0.8,0.586,40,40); }
  100%  { transform: matrix(0.866,0.5,-0.6,0.866,0,0); }
}

• 前 15.3% 的时间 (2200/14400) 没有任何反应。
• 在接下来的 5000 毫秒(直到 50% 标记)，第一个转换展开。
• 在接下来的 15.3% 的时间内没有任何反应。
• 在接下来的 5000 毫秒(直到 50%)内，第二次转换展开。

MDN Using CSS Animations 上有很棒的教程