CSS动画在任何浏览器中都不起作用答案

【问题标题】：CSS animations are not working in any browserCSS动画在任何浏览器中都不起作用
【发布时间】：2017-04-19 22:01:55
【问题描述】：

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

提前道歉，因为我的课程一开始可能会令人困惑。 before 是我想在悬停之前显示的课程内容。 after 是应该在悬停之后（或期间）显示的内容类别。

应该有一个 css 不透明动画，使所有 BEFORE 内容淡出，所有 AFTER 内容淡入，但我无法让它工作。

我在发帖前参考了以下网站和 SO 文章：

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。

【问题讨论】：

标签： html css sass

【解决方案1】：

您的过渡不应在悬停 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;
        }
    }
}

工作应该完成;)

希望我能帮上忙！

【讨论】：

我已经尝试过了，但它不起作用。我在对 OP 的评论中发布了一个小提琴。也许这有助于故障排除？这是小提琴：jsfiddle.net/cLvhbjm1/1

【解决方案2】：

应该有一个 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>

【讨论】：