Question

我试图将盒子缩小并再次缩小。

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

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');
    }
});

Answer 1

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

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

1 个答案: