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; 
     } 
    } 
} 

而且应该完成工作;）

希望我帮忙！