javascript - 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>