버튼 클릭시 CSS 애니메이션 시작

Question

안녕하세요 저는 이제 몇 주 동안 내 문제에 대한 답변을 찾고 있었지만 아무 것도 찾을 수 없었습니다. 반응하기 전에 사용자가 반응하는 데 걸리는 시간을 확인하기 위해 반응 테스트를하고 있습니다. 문제가 발생하면 정사각형이나 원이 튀어 나와 문제가 발생합니다 ...

내 질문에 답변이 있습니다. 사용자가 화면의 버튼을 클릭 할 때 애니메이션을 시작하는 방법은 무엇입니까?

여기 내 코드는 지금까지의 :

HTML :

<div id="first-child"></div> 
    <button id="Second-parent">Click me !</button> 

CSS :

#first-child { 
    height: 200px; 
    width: 200px; 
    background: white; 
    border-radius: 0%; 
    margin-top: 150px; 
    margin-bottom: 0px; 
    margin-left: 500px; 
    margin-right: 0px; 
    -webkit-animation: myfirst 1s; 
    animation: myfirst 1s; 
    } 
@-webkit-animation myfirst { 
    0% {background: white;} 
    20% {background: white;} 
    40% {background: white;} 
    60% {background: white;} 
    80% {background: white;} 
    100% {background: red;} 
    } 

#second-parent { 
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 415px; 
    margin-right: 0px; 
    } 

내가 CSS, HTML, jQuery를 또는 자바 스크립트를 선호합니다. 그러나 그것을 할 수있는 또 다른 방법이 있다면 기꺼이 그것을들을 것입니다.

Answer 1

$(function(){ 
 
\t $('#second-parent').click(function(){ 
 
\t \t e1 = $('#first-child'); 
 
     e1.addClass('animate'); 
 
     e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
 
     function (e) { 
 
      e1.removeClass('animate'); 
 
     }); 
 
\t }); 
 
});

#first-child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: white; 
 
    border-radius: 0%; 
 
    margin-top: 150px; 
 
    margin-bottom: 0px; 
 
    margin-left: 500px; 
 
    margin-right: 0px; 
 
    } 
 
    .animate { 
 
    -webkit-animation: myfirst 3s; 
 
    animation: myfirst 3s; 
 
    } 
 
@keyframes myfirst { 
 
    0% {background: white;} 
 
    40% {background: gray;} 
 
    70% {background: yellow;} 
 
    100% {background: red;} 
 
    } 
 
@-webkit-keyframes myfirst { 
 
    0% {background: white;} 
 
    40% {background: gray;} 
 
    70% {background: yellow;} 
 
    100% {background: red;} 
 
    } 
 

 
#second-parent { 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 415px; 
 
    margin-right: 0px; 
 
    }

<div id="first-child"></div><button id="second-parent">Click me !</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(function(){ 
 
\t \t $('#second-parent').on('click',function(){ 
 
\t \t \t $('#first-child').addClass('animate'); 
 
\t \t }); 
 
\t });

#first-child { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: white; 
 
    border-radius: 0%; 
 
    margin-top: 150px; 
 
    margin-bottom: 0px; 
 
    margin-left: 500px; 
 
    margin-right: 0px; 
 
    } 
 
    .animate { 
 
    -webkit-animation: myfirst 3s; 
 
    animation: myfirst 3s; 
 
    } 
 
@keyframes myfirst { 
 
    0% {background: white;} 
 
    40% {background: gray;} 
 
    70% {background: yellow;} 
 
    100% {background: red;} 
 
    } 
 

 
#second-parent { 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 415px; 
 
    margin-right: 0px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="first-child"></div> 
 
    <button id="second-parent">Click me !</button>

Answer 2

애니메이션에 CSS 클래스를 사용하고 버튼을 클릭 할 때 div에 클래스를 추가하십시오. (CSS 애니메이션을 정의하는 @keyframes를 사용합니다.)

Answer 3

만드는 대신 "ANIM"클래스 정의 #firstChild에서 -webkit-애니메이션과 애니메이션 정의를 제거하고 그런 다음

#first-child { 
    height: 200px; 
    width: 200px; 
    background: white; 
    border-radius: 0%; 
    margin-top: 150px; 
    margin-bottom: 0px; 
    margin-left: 500px; 
    margin-right: 0px; 
} 
.anim{ 
    -webkit-animation: myfirst 1s; 
    animation: myfirst 1s; 
} 

당신이 애니메이션을 트리거 할 때 단순히 jQuery를 사용하여 요소에 .anim 클래스를 추가 : 여기

$("#first-child").addClass("anim"); 

Answer 4

샘플을

#first-child { 
    height: 200px; 
    width: 200px; 
    background: white; 
    border-radius: 0%; 
    margin-top: 150px; 
    margin-bottom: 0px; 
    margin-left: 500px; 
    margin-right: 0px; 
    -webkit-animation: myfirst 1s; 
    animation: myfirst 1s; 
    } 
@-webkit-animation myfirst { 
    0% {background: white;} 
    20% {background: white;} 
    40% {background: white;} 
    60% {background: white;} 
    80% {background: white;} 
    100% {background: red;} 
    } 

.second-parent { 
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 415px; 
    margin-right: 0px; 
    } 

<script> 
$(document).ready(function() 
{ 
    $('#Second-parent').click(function() 
    { 
     $('#first-child').addClass('second-parent'); 
    }); 
}); 
</script> 

</head> 

<body> 
    <div id="first-child"></div> 
    <button id="Second-parent">Click me !</button> 
</body> 

</html> 

당신을 위해 16,

==>을의 jQuery 라이브러리를 추가하십시오, 당신은에 lirabry 다운로드 할 수 있습니다 http://jquery.com/download/