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”方法将同一个类添加到另一个元素时，anmition不起作用。有什么想法吗？

Answer 1

演示 - http://jsfiddle.net/d3md7597/1/

＆＃13;

＆＃13;

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

＆＃13;

#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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;