ios - webkit 不动画不透明度

Question

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

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

1. 设置可见性:对 web-kitKeyframes 可见
2. 将 web-kitKeyframes 的“from - to”更改为“0% to 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;
    }
}