CSS動畫在任何瀏覽器中都不起作用

Question

這可能是真的，真的很愚蠢，我錯過了，但是我的CSS動畫不能按預期工作。分別淡化和淡化的元素，我只是在它們之間發生了一個快速，令人討厭的變化。

提前道歉，因爲我的課程起初可能會讓人困惑。 before是我想在懸停前顯示的課程內容。 after是應該在AFTER（或在）懸停期間顯示的內容類別。

應該有一個CSS的不透明動畫，使所有的BEFORE內容淡出，所有的AFTER內容淡入，但我不能讓它工作。

我有參考以下網站和SO文章發佈前：

• Bavotasan: A simple fade with CSS 3
• SO: Using CSS for fade-in effect on page load
• SO: Show button on hover only

CSS（SCSS）：

.homepage-services-hover { 
     position: relative; 
     display: inline-block; 
     vertical-align: top; 
     width: 100%; 
     height: auto; 

     .before { 
      position: relative; 
      top: 0; 
      left: 0; 
      visibility: visible; 
      opacity: 1; 
     } 

     .after { 
      position: absolute; 
      top: 0; 
      left: 0; 
      visibility: visible; 
      opacity: 0; 
     } 

     &:hover { 
      .before { 
       opacity: 0; 
       transition: opacity .5s; 
       -moz-transition: opacity .5s; 
       -webkit-transition: opacity .5s; 

       position: absolute; 
       top: 0; 
       left: 0; 
       visibility: visible; 
      } 
      .after { 

       opacity: 1; 
       transition: opacity .5s; 
       -moz-transition: opacity .5s; 
       -webkit-transition: opacity .5s; 

       position: relative; 
       top: 0; 
       left: 0; 
       visibility: visible; 
      } 
     } 
} 

HTML：

<span class="homepage-services-hover" style="width: 175px; text-align: center;"> 

    <a href="#"> 

     <img class="before" src="https://placehold.it/150x150" alt="IMAGE" /> 

     <span class="before"> 

      <h5>Title</h5> 

      <P> 
      Excerpt 
      </P> 

     </span> 


    </a> 

    <img class="after" src="https://placehold.it/175x175" alt="IMAGE"/> 

    <a class="button after" href="#">TITLE</a> 

</span> 

所有的開發都是在本地服務器上完成，所以我不能發佈一個活鏈接。

我不知道JSFiddle支持SASS，因此這裏是Fiddle。

Answer 1

應該有一個css不透明度動畫，它會使所有BEFORE內容 淡出，並且所有AFTER內容都會淡入，但是我無法讓它工作。

正如你正確識別，你只需要設置的所有元素的初始opacity，然後申請一個opacity transition相同的元素：

div { 
 
display: inline-block; 
 
vertical-align: top; 
 
width: 200px; 
 
height: 200px; 
 
transition: opacity 1.5s ease-out; 
 
} 
 

 
div p { 
 
color: rgb(255,255,255); 
 
font-weight: bold; 
 
font-size: 24px; 
 
text-align: center; 
 
} 
 

 
div:nth-of-type(1) { 
 
background-color: rgb(255,0,0); 
 
opacity: 1; 
 
} 
 

 
div:nth-of-type(2) { 
 
background-color: rgb(0,0,255); 
 
opacity: 0; 
 
} 
 

 
div:nth-of-type(1):hover { 
 
opacity: 0; 
 
} 
 

 
div:nth-of-type(1):hover + div:nth-of-type(2) { 
 
opacity: 1; 
 
}

<div> 
 
<p>Hover Me</p> 
 
</div> 
 

 
<div> 
 
</div>

Answer 2

你的過渡高度重視和不在懸停的CSS但類別的基本CSS所以只是改變你的CSS爲：

.homepage-services-hover { 
    position: relative; 
    display: inline-block; 
    vertical-align: top; 
    width: 100%; 
    height: auto; 

    .before { 
     position: relative; 
     top: 0; 
     left: 0; 
     visibility: visible; 
     opacity: 1; 

     transition: opacity .5s; 
     -moz-transition: opacity .5s; 
     -webkit-transition: opacity .5s; 
    } 

    .after { 
     position: absolute; 
     top: 0; 
     left: 0; 
     visibility: visible; 
     opacity: 0; 

     transition: opacity .5s; 
     -moz-transition: opacity .5s; 
     -webkit-transition: opacity .5s; 
    } 

    &:hover { 
     .before { 
      opacity: 0; 

      position: absolute; 
      top: 0; 
      left: 0; 
      visibility: visible; 
     } 
     .after { 

      opacity: 1; 

      position: relative; 
      top: 0; 
      left: 0; 
      visibility: visible; 
     } 
    } 
} 

而且應該完成工作;）

希望我幫忙！