Menu
Hi I've been looking for answers on my problem now for maybe a few weeks now and I find nothing. I'm trying to make a reaction test to check how long time it takes for the user before they react and it will popup either a square or a circle and I hit a problem...
My question is if there's any way to start an animation when the user clicks the button on the screen ?
Here's my code so far:
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;
}
I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.
547
$(function(){
$('#second-parent').click(function(){
e1 = $('#first-child');
e1.addClass('animate');
e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
e1.removeClass('animate');
});
});
}); #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(){
$('#second-parent').on('click',function(){
$('#first-child').addClass('animate');
});
}); #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>Use a css class for the animation and add the class to div when button clicked. (use @keyframes to define css animations.)
44
Here is a solution using pure javascript and CSS @keyframes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Animations</title>
<style>
/* <![CDATA[ */
div {
height: 2em;
width: 50%;
border: 1px solid black;
background-color: black;
color: yellow;
}
.animate {
animation-name: slide-right;
animation-duration: 2s;
/* Preserve the effect of the animation at ending */
animation-fill-mode: forwards;
}
@keyframes slide-right {
from {
margin-left: 0px;
}
50% {
margin-left: 110px;
opacity: 0.5;
}
to {
margin-left: 200px;
opacity: 0.2;
}
}
/* ]]> */
</style>
<script>
/* <![CDATA[ */
function DoAnimation() {
var targetElement = document.getElementById("target");
targetElement.className = "animate";
}
/* ]]> */
</script>
</head>
<body>
<h1>CSS Animations</h1>
<div id="target">Super div</div>
<button onclick="DoAnimation();">Go</button>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
