CSSアニメーションはどのブラウザーでも動作していません

Question

これはおそらく私が見逃していたものですが、CSSアニメーションが期待どおりに動作していないことでしょう。要素がフェードアウトするのではなく、それぞれで、私はちょうどそれらの間で素早く、厄介な変更を取得します。

私のクラスは最初は紛らわしいので、事前に謝罪してください。 beforeは、前に表示したいクラスコンテンツです。 afterは、ホバーの後（またはホバー）に表示されるべきコンテンツのクラスです。

すべてのBEFOREコンテンツをフェードアウトさせ、すべてのAFTERコンテンツをフェードインさせるcss不透明アニメーションが必要ですが、動作させることはできません。

私が投稿する前に、以下のサイトと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> 

すべてのdevのは、ローカルサーバー上で実行されます。

私はJSFiddleがSASSをサポートしていることを知らなかったので、ここにはFiddleがあります。

Answer 1

すべてのコンテンツの前になりますCSSの不透明度のアニメーションがあるべきフェードアウトし、すべてのコンテンツのフェードの後で、私はそれを動作させることはできません 。

あなたは正しく識別したとして、あなただけのすべての要素に初期opacityを設定し、同じ要素にopacity transitionを適用する必要があります：あなたの遷移souldをしませ

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

そして仕事が完了する必要があります;）

私は手伝ってください！