如何多使用css转换属性？

基本上我想要的图像改变其立场有时，所以我用这个代码：如何多使用css转换属性？

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属性？有更好的方法来做同样的效果？

来源

2016-03-04 dave

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

没有任何反应的时间（14400分之2200）第15.3％。
在接下来的5000ms（直到50％的标记），第一个转换展开。
接下来15.3％的时间没有任何反应。
在接下来的5000ms（直到50％），第二个转换展开。

有一个伟大的教程在MDN Using CSS Animations

来源

2016-03-05 02:40:41 AJFarkas

谢谢，这样对我的作品！ – dave

请选择它作为您的首选答案，以便其他人可以看到您的问题已得到解答。 – AJFarkas

完成！非常感谢！ – dave

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延迟，作为动画本身需要5000毫秒。 5000ms +你的2200ms = 7200ms。

来源

2016-03-04 23:45:49 WcPc

如何多使用css转换属性？

回答

相关问题