CSS动画在任何浏览器中均不起作用

Question

这可能是我确实非常愚蠢的东西，但是我的CSS动画无法正常工作。 而不是元素逐渐淡入和淡出，我只是在它们之间进行了快速，讨厌的更改。

事先道歉，因为我的课程起初可能会令人困惑。 before是我想在悬停之前要显示的课程内容。 after是应该在悬停之后（或之后）显示的内容类别。

应该有一个CSS不透明动画，它可以使所有之前内容淡出，而所有之后内容淡入，但是我无法使其正常工作。

发布前，我已经引用了以下网站和SO文章：

• Bavotasan：CSS 3的简单淡入淡出
• SO：使用CSS对页面加载进行淡入效果
• 因此：仅在悬停时显示按钮

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不透明动画，它可以使所有之前内容淡出，而所有之后内容淡入，但是我无法使其正常工作。

正确识别后，您只需在所有元素上设置初始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上，而是在classe的基本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;
        }
    }
}

和工作应该完成;）

希望我帮忙！