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

delay()仅适用于动画，不适用于其他内容。您必须使用setTimeout()

setTimeout( transform_one, 2200);

function transform_one() {
  $('#block').css({ transform: 'matrix(0.586,0.8,-0.8,0.586,40,40)' }).css({ "transition-duration": "5s" });
  setTimeout( transform_two, 7200);
}

function transform_two() {
  $('#block').css({ transform: 'matrix(0.866,0.5,-0.6,0.866,0,0)' }).css({ "transition-duration": "5s" });
}

jsfiddle

请注意，对于第二次超时，延迟时间为7200ms，因为动画本身需要5000ms。 5000毫秒+你的2200毫秒= 7200毫秒。

Answer 2

为什么不使用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

有一个很棒的教程

如何使用更多次css转换属性？

2 个答案: