为什么这个关键帧动画不起作用？答案

【问题标题】：Why isn't this keyframe animation working?为什么这个关键帧动画不起作用？
【发布时间】：2014-10-04 18:13:35
【问题描述】：

我正在尝试放大和缩小盒子。

这是我第一次使用关键帧动画，我不确定调用它们的正确方法。

HTML：

<div class="wrap">
  <div class="bounce"></div>
</div>

CSS：

@-webkit-keyframes pulse { 
    0%   { -webkit-transform: scale(1);   } 
    50%  { -webkit-transform: scale(2); } 
    100% { -webkit-transform: scale(2);   } 
} 
@keyframes pulse { 
    0%   { transform: scale(1);   } 
    50%  { transform: scale(2); } 
    100% { transform: scale(2);   } 
}
.wrap {
    width:500px;
    height:500px;
    background:#999999;
    margin:0 auto;
    position:relative;
}
.bounce {
    width:50px;
    height:50px;
    background:#333333;
    position:absolute;
    left:200px;
    top:300px;
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
.bounce.go {
    top:50px;
    -webkit-animation-name: pulse 1s 1; 
    animation-name: pulse 1s 1; 
}

JS：

$('.bounce').bind('click', function() {
    if ($('.bounce').hasClass('go')) {
        $('.bounce.go').removeClass('go');
    } else {
        $(this).addClass('go');
    }
});

【问题讨论】：

离题：您的 jQuery 代码已经过时且冗长。 $('.bounce').on('click', function() { $(this).toggleClass('go'); });
@NOPENOPENOPE 如果我的回答是正确的，请点击勾号。谢谢 :)

标签： jquery css css-animations

【解决方案1】：

替换你的-webkit-animation-name to -webkit-animation

【讨论】：