Html CSS-transform:rotateX动画不适用于移动浏览器（即使使用-webkit-）

我的电脑上有一个动画，一个单词在旋转。使用transform:rotateX90deg:

我在另一篇文章中读到，在iOS上，每个浏览器都使用webkit，因为它们基于uiwebview。所以我在动画中添加了webkit。 但它在移动设备上仍然不起作用。 在我测试的上，如果transform属性在mobile上受支持，并且是的，那么它就是。所以我想这不可能是问题所在。有人知道我怎么解决这个问题吗？ 提前谢谢

可能的解决方案1

尝试使用以下方法：

-webkit-animation-name: ueli;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;

而不是

  -webkit-animation:ueli 3s forwards;

这可以解决你的问题

可能的解决办法2

尝试为每个浏览器关键帧使用不同的名称

-webkit-animation: webkit-ueli 3s forwards;
 animation:ueli 3s forwards;

及

可能的解决办法3

注意：此属性必须与transform属性一起使用

尝试在关键帧外部添加变换。

试试这段代码

在style.css中，webkit关键帧写入错误

@-webkit-keyframes ueli {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: rotateX(90deg);
        opacity: 0;
    }
}

@keyframes ueli {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
    }
    50% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
    }
}

换成

@-webkit-keyframes ueli {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
    }
    50% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
    }
}

@keyframes ueli {
  0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: rotateX(90deg);
        opacity: 0;
    }
}

---

它在IOS上对我有效

谢谢你的回答。不幸的是，它并没有解决我的问题。希望第二种方法能解决你的问题。虽然效果不太好，但有个好主意：你可以在我的问题中提到的页面上查看。我根据你的答案更改了密码。最后一次尝试。然后我就失去了灵感：对不起。动画只是不想工作。但是你的努力得到了一张赞成票：谢谢你的回答！我这样改了，但似乎还是不起作用。你知道问题出在哪里吗？JS或CSS中的其他内容是否会影响其行为？您在哪个浏览器中进行了检查。它在safari v6I上运行良好我在safari idk上测试了它，哪个版本是最新的固件，在Chrome v58.0.3029.83上测试了它。我只想问一下它在Chrome上是否正常工作，在safari上是否显示了任何东西EditEMS initiallyNo，没有什么。但是我认为，文本处于最终状态，所以旋转了-90度，因为它在那里，div得到了大小，就好像有文本一样。

@-webkit-keyframes ueli {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: rotateX(90deg);
        opacity: 0;
    }
}

@keyframes ueli {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
    }
    50% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
    }
}

@-webkit-keyframes ueli {
    0% {
        opacity: 0;
        -webkit-transform: rotateX(-90deg);
    }
    50% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
    }
}

@keyframes ueli {
  0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    50% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    100% {
        transform: rotateX(90deg);
        opacity: 0;
    }
}