Question

单击按钮时#login div显示为可见，但是当页面重新加载后第一次单击该按钮时，动画不会发生，直到我第二次单击该按钮。页面上的所有内容都具有相同的动画，并与div共享相同的关键帧。

body {

    background: -webkit-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: -o-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: -webkit-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: -moz-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: linear-gradient(top, #FFFFFF, #C3C3C3);
    margin: 0;
    max-width: 100%;
    text-align:center;
    background-size:cover;
    background-position:center;
    -webkit-animation:fadein 2s;
    -moz-animation:fadein 2s;
    animation:fadein 2s;
    -o-animation:fadein 2s;
}


#login {
    height: 150px;
    width: 300px;
    background: #FFF;
    border: 1px #A4A4A4 solid;
    border-radius:20px;
    position: absolute;
    height: 300px;
    width: 350px;
    left: 465px;
    bottom: 180px;
    text-align:center;
    -webkit-animation:fadein 1s;
    -moz-animation:fadein 1s;
    animation:fadein 1s;
    -o-animation:fadein 1s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

Answer 1

根据你的描述，我会使用它，它完美地运作：

<强> LIVE DEMO

HTML：

<body>
    <div id="login" class="hide">LOGIN</div>
    <div id="button">BUTTON</div>
</body>

CSS：

body {
    background: -webkit-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: -o-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: -webkit-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: -moz-linear-gradient(top, #FFFFFF, #C3C3C3);
    background: linear-gradient(top, #FFFFFF, #C3C3C3);
    margin: 0;
    max-width: 100%;
    text-align:center;
    background-size:cover;
    background-position:center;
    -webkit-animation:fadein 2s;
    -moz-animation:fadein 2s;
    animation:fadein 2s;
    -o-animation:fadein 2s;
}


#login {
    height: 150px;
    width: 300px;
    background: #FFF;
    border: 1px #A4A4A4 solid;
    border-radius:20px;
    position: absolute;
    height: 300px;
    width: 350px;
    left: 465px;
    bottom: 180px;
    text-align:center;
    -webkit-animation:fadein 1s;
    -moz-animation:fadein 1s;
    animation:fadein 1s;
    -o-animation:fadein 1s;
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

.hide {
    display: none;
}

jQuery的：

$('#button').click(function() {
     $("#login").toggleClass('hide');
});

动画不会在第一次点击时发生？

1 个答案: