CSS3關鍵幀不工作

Question

下面是代碼 -

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

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

在HTML當元件被賦予類「startanimation」的動畫作品。但是，當使用「addClass」方法將相同的類添加到另一個元素時，該行爲不起作用。有任何想法嗎？

Answer 1

演示 - 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>