Начните анимацию 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 или Javascript. Но если есть еще один способ сделать это, я тоже с удовольствием это услышу.

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 при нажатии кнопки. (Используйте @keyframes для определения CSS-анимации.)

Answer 3

Удалите -webkit-анимации и анимации определения из #firstChild и вместо того, чтобы создать «Anim» определение класса:

#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; 
} 

Затем, когда вы хотите, чтобы вызвать анимацию просто добавить .anim класс в элемент с JQuery:

$("#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> 

==> добавьте библиотеку Jquery в, вы можете скачать lirabry в: http://jquery.com/download/