CSS动画无法在任何浏览器中使用

时间:2016-12-05 13:32:39

标签: html css css3 sass

这可能是我错过的真正非常愚蠢但我的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

2 个答案:

答案 0 :(得分:2)

  

应该有一个css不透明度动画,它可以制作所有BEFORE内容   淡出,所有AFTER内容都淡入,但我无法让它工作。

正如您已正确识别的那样,您只需要在所有元素上设置初始opacity,然后将opacity transition应用于相同的元素:

&#13;
&#13;
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;
}
&#13;
<div>
<p>Hover Me</p>
</div>

<div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

应该完成工作;)

希望我能帮忙!