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
Use a css class for the animation and add the class to div when button clicked. (use @keyframes
to define css animations.)
A full example without using Jquery:
<!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>
Remove the -webkit-animation and animation definitions from #firstChild and instead create an "anim" class definition:
#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;
}
Then when you want to trigger the animation simply add the .anim class to your element with jQUery:
$("#first-child").addClass("anim");
Here the sample for you
#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>
==> please add the jquery library in the , you can download lirabry in: http://jquery.com/download/
$(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>