CSS3关键帧不起作用

【问题标题】：CSS3 Keyframes not workingCSS3关键帧不起作用
【发布时间】：2014-12-15 17:36:44
【问题描述】：

下面是代码-

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

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

在 HTML 中，当一个元素被赋予一个“startanimation”类时，动画就会起作用。但是当使用“addClass”方法将同一个类添加到另一个元素时，动画不起作用。有什么想法吗？

【问题讨论】：

请提供一个jsfiddle
@Vangel Tzo - jsfiddle.net/kb3gN/8477

标签： javascript jquery css animation css-animations

【解决方案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>

【讨论】：