html - 不同变换的持续时间不同？

Question

我已经为一个元素设置了过渡和变换。我希望我的每个变换(缩放、透视、旋转)都有不同的持续时间。有什么方法可以实现吗？

过渡:

transition:-webkit-transform 1s linear;
-webkit-transition: -webkit-transform 1s linear; /** Chrome & Safari **/

转换:

   -webkit-transform: translate3d(50px, 114.82978723404256px, 0px) perspective(2000px) rotateX(40deg) scale(0.23297872340425532);

Answer 1

您可以像下面的代码一样实现它。我已经在我的网站上使用过它，效果非常好。

-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
-moz-transition: -moz-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;

希望对您有所帮助!

谢谢