Javascript CSS3关键帧不工作

下面是代码-

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

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

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

演示-

$“开始”。单击“开始”，函数{ $'x'.addClass'startanimation' } $“停止”。单击“停止”功能{ $'x'。删除类“startanimation” } x{ 背景：粉红色； 高度：100px； 宽度：100px； 边界半径：50%； 位置：绝对位置； 左：300px； 顶部：200px； } .startanimation{ 高度：100px； 宽度：100px； 背景：黄色； -webkit动画：动画1s无限； } @-webkit关键帧动画{ 100% { 宽度：300px； 高度：300px； } } 开始 停止

---

请提供一份jsfiddle@Vangel曹-