CSS3 fadeIn transistion無法在iOS設備上運行

嘗試獲取以下內容，這似乎可以在桌面上運行，也可以在移動設備上運行，但我看到的只有白色。所以淡入從未發生。這裏是我的HTML：CSS3 fadeIn transistion無法在iOS設備上運行

<a href="https://thecleverroot.com/meet-your-makers-hudson-valley-foie-gras/" title="Folio: Meet Your Makers" class="feature-link"> 
<section class="feature fade-in one" style="background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35)), url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg) no-repeat top center!important; background-size: cover!important;"> 
<section class="feature-caption"><p class="category-link">Growers</p><h2>Folio: Meet Your Makers </h2><p>Jenny Chamberlain, Chef of Product Development for Hudson Valley Foie Gras, Ferndale, NY</p><p class="read-more">Read</p></section></section> 
</a>

這是CSS：

.fade-in.one { -webkit-animation-delay: 1.25s; -moz-animation-delay: 1.25s; -o-animation-delay: 1.25s; animation-delay: 1.25s; } 
.fade-in { opacity: 0; -webkit-animation: 1s ease-in 0s normal forwards 1 running fadeIn; -moz-animation: 1s ease-in 0s normal forwards 1 running fadeIn; -o-animation: 1s ease-in 0s normal forwards 1 running fadeIn; animation: 1s ease-in 0s normal forwards 1 running fadeIn; } 
body.home a.feature-link { text-decoration: none; } 
.feature-caption h2 { font-size: 64px; line-height: .75em; margin: .25em 0; } 
.category-link { 
    background: #000; 
    border-radius: 14px; 
    display: inline-block; 
    margin: 0; 
    padding: 0 20px; 
    min-width: 90px; 
    height: 31px; 
    line-height: 31px; 
    color: #FFF; 
    font-size: 14px; 
    text-align: center; 
    font-weight: 400; 
    text-transform: uppercase; 
}

CodePen：http://codepen.io/anon/pen/ojZXNy

來源

2015-10-02 Adam Bell

我試過CodePen你的代碼，但無論是（我測試了最新它不上桌面的工作Chrome和Safari在Mac OS優勝美地）。

如果你想被加載後，它在你的HTML頁面的內容褪色，你可以做這樣的：

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      .faded-out { 
       opacity: 0; 
      } 
      .fade-in { 
       opacity: 1; 
       transition: opacity 1s ease-in-out; 
       -moz-transition: opacity 1s ease-in-out; 
       -webkit-transition: opacity 1s ease-in-out; 
      } 
      #fadeInContainer { 
       background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg); 
       padding: 60px; 
      } 
     </style> 
     <script type="text/javascript"> 
      window.onload = function() { 
       document.getElementById("fadeInContainer1").className = "fade-in"; 
       document.getElementById("fadeInContainer2").className = "fade-in" 
      } 
     </script> 
    </head> 
    <body> 
     <a href="https://thecleverroot.com/meet-your-makers-hudson-valley-foie-gras/" title="Folio: Meet Your Makers" class="feature-link"> 
      <section id="fadeInContainer1" class="faded-out"> 
       <h1>Content 1</h1> 
      </section> 
      <section id="fadeInContainer2" class="faded-out"> 
       <h1>Content2</h1> 
      </section> 
     </a> 
    </body> 
</html>

有2 CSS類：.faded-out（隱藏內容，而頁面被加載）和fade-in（內容淡入淡出）。

最初的內容有faded-out類。當頁面加載時，我們將CSS類切換爲fade-in以淡入內容。這是通過JavaScript完成的。

編輯：我在兩節現在褪色，在您的評論

來源

2015-10-02 06:35:19 joern

我不希望在整個頁面褪色請求。只是某些div鏈接到文章（這是一個新聞網站）。 –

你可以用同樣的方法做到這一點。只需給每個部分一個唯一的id和'淡出'類，並將CSS類更改爲在每個部分「淡入」，如我的答案中所述。 – joern

我更新了我的答案，所以現在有2個部分褪色 – joern

CSS3 fadeIn transistion無法在iOS設備上運行

回答

相關問題