webkit-transform不适用于iOS

Question

我试图在我的感官触摸应用程序中使用这实现导航抽屉。本文中解释的动画是使用webkit转换完成的。这就像我的桌面和安卓设备上的魅力一样，但它在iPad mini上不起作用，甚至在chrome上也不行。这是我的css:-

.slide{
-webkit-animation-duration: .200s;
-webkit-transition-timing-function: cubic-bezier(0.275, 0.080, 0.425, 0.855);
}    
@-webkit-keyframes slideout {

from {
-webkit-transform: translate3d(0,0,0);
}

to {
-webkit-transform: translate3d(250px,0,0);
};
}

@-webkit-keyframes slidein {
from {
-webkit-transform: translate3d(250px,0,0);
}

to {
-webkit-transform: translate3d(0px,0,0);
};
}

.slide.out {
-webkit-animation-name: slideout;
-webkit-transform: translate3d(250px,0,0);
}

.slide.in {
-webkit-animation-name: slidein;
-webkit-transform: translate3d(0px,0,0);
}

这是iOS的特定问题，还是我做错了什么？

Answer 1

因为您只是在关键帧中使用"from“(=0%)和"to”(=100%)，而没有定义任何其他步骤(25%、50%等)。我看不出使用关键帧的实际好处。特别是因为关键帧会导致大量的CSS行。在我看来，关键帧只有在您想要定义子步骤时才有意义。

对于所有其他目的，转换应该是选择的解决方案，因为它们只是从起点动画到目标值：见Fiddle

div {
    background:red;
    -webkit-transform:translate3d(0,0,0);
    -webkit-transition:-webkit-transform 1s;
}

.slide.in {
    -webkit-transform:translate3d(0,0,0);
}

.slide.out {
    -webkit-transform:translate3d(250px,0,0);
}