html - CSS 动画在任何浏览器中都不起作用

Question

这可能是我错过的非常非常愚蠢的事情，但我的 CSS 动画没有按预期工作。我没有让元素分别淡出和淡入，而是在它们之间进行快速、令人讨厌的变化。

提前致歉，因为我的类(class)一开始可能会令人困惑。 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>

所有开发都在本地服务器上完成，因此我无法发布实时链接。

我不知道 JSFiddle 支持 SASS 所以这里是 Fiddle .

Answer 1

There should be a css opacity animation which makes all BEFORE content fade out and all AFTER content fade in but I can't get it to work.

正如您已经正确识别的那样，您只需要在所有元素上设置初始 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>