如何减小圆圈大小？

Question

我有一个形状为圆形的div我已经用CSS完成了animation处理。现在我想做的事情是当圆圈移到底部时圆圈size保持不变（现在对我来说是可以的），但是当圆圈弹回顶部然后圆圈时减小它的size 。我不知道， CSS有可能吗？ 我在JS的时间很长，有人可以解决我的问题或建议我正确的方法吗？

JsFiddle链接

提前致谢。

HTML：

<div class="hello"></div>

CSS：

.hello{
      width:100px;
      height:100px;
      border:5px solid black;
      border-radius:55px;
 }
 div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
     -webkit-animation-name: example; 
     -webkit-animation-duration: 4s; 
     animation-name: example;
     animation-duration: 4s;
 }
 @keyframes example {
     0%   {background-color:red; left:0px; top:0px;}
     75%  {background-color:green; left:0px; top:200px;}
     100% {background-color:red; left:0px; top:0px;}
 }

Answer 1

有几件事。 底部有一个JSFiddle，显示了我列出的所有内容：

1. 要减小圆的大小，只需添加height: <whatever>px; 和width:<whatever>px; 到动画的最后阶段。
2. 请注意，如果只希望它在最后一部分减小（反弹到顶部），则需要指定height和width值仍是75％阶段的起始值。
3. 由于您正在更改圆的大小，因此动画将在最后“跳”回其现有形式。 这是因为，默认情况下，CSS动画不是持久的。 无论您进行什么更改，只要恢复到正常状态，动画的持续时间就与动画一样长。
4. 如果要使更改保持不变并在动画结束后保留​​，则需要使用animation-fill-mode: forwards; 。

我已经创建了您的原始的jsfiddle编辑与所有的上述变化在这里 。

Answer 2

试试这个- 小提琴

100% {background-color:red; left:0px; top:0px; width:50px;height:50px}

Answer 3

您可以在keyframes修改div的width和height ，以获得所需的效果。

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    75%  {background-color:green; left:0px; top:200px;width:100px;height:100px;}
    100% {background-color:red; left:0px; top:0px;width:50px;height:50px}
}  

小提琴

我们将关键帧中圆圈的宽度和高度减小了100%因此当球反弹时，即从关键帧75%到100%球将动画化为较小的尺寸。 请注意，为了在关键帧75%之前保持球的大小不变，我们再次在该关键帧中定义height:100px和width:100px 。