Start a css animation on button click

Question

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

Answer 1

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");