CSS3 Keyframes not working

Question

Below is the code -

.startanimation {
    height: 100px;
    width: 100px;
    background: yellow;
    -webkit-animation: animate 1s infinite;
}

@-webkit-keyframes animate {
    100% {
        width: 300px;
        height: 300px;
    }
}

In the HTML when an element is given a class "startanimation", the animation works. But when the same class is added to another element using "addClass" method, the anmition does not work. Any ideas?

Answer 1

demo - http://jsfiddle.net/d3md7597/1/

 $('#start').on('click', function() { $('#x').addClass('startanimation') }) $('#stop').on('click', function() { $('#x').removeClass('startanimation') }) 

 #x { background: pink; height: 100px; width: 100px; border-radius: 50%; position: absolute; left: 300px; top: 200px; } .startanimation { height: 100px; width: 100px; background: yellow; -webkit-animation: animate 1s infinite; } @-webkit-keyframes animate { 100% { width: 300px; height: 300px; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <button id="start">Start</button> <button id="stop">Stop</button> <br> <br> <div id="x"></div>