Problems with CSS3 animations and animations following a javascript class switch


Im trying to get an animation to trigger when I update the elements class via javascript. The intention is for this to be part of a PhoneGap app so -webkit- prefixes should do the job to my knowledge.

Anyhow, the animations are currently not working when I'm testing in Chrome, both when on the element alone as well on the new class. Can anybody explain where I'm going wrong here?


<!DOCTYPE html>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <a href="#" onclick="document.getElementById('ani1').className = 'bounce fade';">
        <div id="ani"></div>


@-webkit-keyframes bounce {  
    0%, 100% {
        -webkit-transform: translateY(50px);

    20%, 60% {
        -webkit-transform: translateY(70px);

    80%, 40% {
        -webkit-transform: translateY(30px);

#ani {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 50px;
    background: red;
    -webkit-transform: all 0.1s;
    -webkit-animation: 'bounce' 1s 'ease-in-out';
    -webkit-animation-iteration-count: 3;
    -webkit-animation-delay: 2s;
    -webkit-animation: 'bounce' 1s 'ease-in-out';
    -webkit-animation-iteration-count: 3;
    -webkit-transition: opacity 0.4s linear;
    -webkit-animation-delay: 3s;
Problem courtesy of: gazzwi86


There are two problems. First there is a typo in your inline Javascript: getElementById('ani1'). There is a "1" appended at the id.

The second thing is that you have to remove the quotes in the -webkit-animation statements.


-webkit-animation: 'bounce' 1s 'ease-in-out';


-webkit-animation: bounce 1s ease-in-out;

If you fix that, it should work ;-)

Solution courtesy of: dalucks


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.