Question

我的page上有一个动画，其中一个单词正在旋转。这是使用transform:rotateX(90deg)：

完成此CSS关键帧动画

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

我已经阅读了另一个question，在iOS上每个浏览器都使用webkit，因为它们基于uiwebview。所以我在我的动画中添加了webkit。但它仍然没有在移动设备上工作在caniuse.com我测试过，如果转换属性甚至在移动设备上支持，是的，它是。所以这不是我想的问题。任何人都知道如何解决这个问题？提前谢谢！

Answer 1

可能的解决方案＃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;

和

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

可能的解决方案＃3

＆＃34;注意：此属性必须与转换属性一起使用。＆＃34;

尝试在关键帧外添加转换。 W3schools ref

Answer 2

试用此代码

在你的style.css -webkit-keyframes写错了

@-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 DEMO

CSS - 转换：rotateX动画无法在移动浏览器上运行（即使使用-webkit-）

2 个答案: