CSS-转换：rotateX动画在移动浏览器上不起作用（即使使用-webkit-）

Question

I got an animation on my page , where a word is rotating. Thats done with this CSS keyframe animation using transform:rotateX(90deg) :

.words .active{
  display:inline-block;
  -webkit-transform-origin: 50% 55%;
  -moz-transform-origin: 50% 55%;
  -ms-transform-origin: 50% 55%;
  -o-transform-origin: 50% 55%;
  transform-origin: 50% 55%;
  -webkit-animation:ueli 3s forwards;
  -moz-animation:ueli 3s forwards;
  -ms-animation:ueli 3s forwards;
  -o-animation:ueli 3s forwards;
  animation:ueli 3s forwards;
}
@-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;
  }
}

I've read on another question , that on iOS every browser uses webkit, because they are based on uiwebview. So I added webkit to my animation. But it's still not working on mobile devices.
On caniuse.com I tested, if the transform property even is supported on mobile and yes, it is. So that can't be the problem I guess. Anyone knows how I can fix that?
Thanks in advance!

Answer 1

Possible solution #1

Try using this:

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

instead of

  -webkit-animation:ueli 3s forwards;

This could fix your problem.

---

Possible solution #2

Try using a different name for each browser keyframe.

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

And

  @-webkit-keyframes webkit-ueli{
  @keyframes ueli{

---

Possible solution #3

"Note: This property must be used together with the transform property."

Try adding a transform outside the keyframe. W3schools ref

Answer 2

Try this code

In your style.css -webkit-keyframes is written wrong

@-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;
    }
}

change it to

@-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;
    }
}

it works for me on IOS DEMO