Webkit不會為不透明度設置動畫

Question

我花了整整一天的時間來解決此問題，但是，目前還無法解決。 我試圖通過iOS的Webkit動畫將不透明度從0設置為1。 但是它不起作用，並且我應用了動畫的元素沒有出現。 我在其他設備上沒有相同的問題。 提前謝謝你的幫助。

這些是我嘗試過的解決方案。

1. 設置可見性：對web-kitKeyframes可見
2. 將web-kitKeyframes的“從-更改為”到“ 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瀏覽器中查看（如果可用）。