webkit 不动画不透明度

Question

我花了一整天的时间来解决这个问题，但是，我还不能解决这个问题。我尝试通过 ios 的 webkit 动画将不透明度从 0 设置为 1。但是它不起作用，我应用动画的元素没有出现。我在其他设备上没有同样的问题。预先感谢您的帮助。

这些是我尝试过的解决方案。

将 visibility:visible 设置为 web-kit 关键帧
将 "from - to" 更改为 web-kit 关键帧的“0% 到 100%”

.hello {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 5em;
    /* for iOS's opacity issue */ 
    color: white;
    opacity:0;
    -webkit-opacity: 0;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #f75998;
    animation:fadein 0.5s 0.8s forwards;
    -webkit-animation: fadein 0.5s 0.8s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.5s 0.8s forwards; /* Firefox < 16 */
    -ms-animation: fadein 0.5s 0.8s forwards; /* Internet Explorer */
    -o-animation: fadein 0.5s 0.8s forwards; /* Opera < 12.1 */
  }

  @-webkit-keyframes fadein {
    0% {
      opacity: 0;

    }
    100% {
      opacity: 1;

    }
  }

按照动画设置显示元素。

Answer 1

-webkit-opacity 有一个普通的 opacity 回退。通过编写以下内容尝试使用关键帧对其进行建模：

@keyframes fadein {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Answer 2

在您的动画中，您为 opacity 属性设置了动画，而不是 -webkit-opacity 属性。但是，您可以尝试删除所有 -webkit- 前缀并在 webkit 浏览器中查看它是否有效。

webkit 不动画不透明度

webkit does not animate opacity

css

webkit

ios

reactjs