첫 번째 클릭에서 애니메이션이 발생하지 않습니까?

버튼을 클릭하면 #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; 
    } 
}

출처

2014-01-21 Justin

HTML/자바 스크립트도 포함하십시오. –

귀하의 설명에 따르면, 나는이를 사용하는 것, 그것은 완벽하게 작동합니다 :

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'); 
});

출처

2014-01-21 19:06:14 bugovicsb

첫 번째 클릭에서 애니메이션이 발생하지 않습니까?

답변

관련 문제