css - css transform-property 单独翻译

Question

我想做的是在对象变换上使用过渡，但 translate() 和 scale() 有单独的延迟

大意是：

transition: transform:scale() 2s 0s ease, transform:translate() 2s 2s ease

这似乎不可能，但想问群众。

替代方案可能是使用动画关键帧，或应用具有两个不同过渡的单独类。

Answer 1

@-webkit-keyframes animIn
{
0%   {-webkit-transform:translateX(-1920px) scale(0.8);opacity:0;}
1%   {-webkit-transform:translateX(-1920px) scale(0.8);opacity:1;}
33%  {-webkit-transform:translateX(-1920px) scale(0.8);opacity:1;}
66%  {-webkit-transform:translateX(0px)     scale(0.8);opacity:1;}
100% {-webkit-transform:translateX(0px)     scale(1.0);opacity:1;}
}

答案是切换到动画方法。