Javascript 如何减小圆的大小？

我有一个

div

，它的形状是圆形的。我用CSS做了

动画

的事情。现在我想做的是，当圆形到底部时，圆形

size

保持不变（现在这对我来说没问题），但当圆形反弹到顶部时，圆形缩小它的大小。我不知道，是否可以使用CSS？我在JS非常忙。有人能解决我的问题或给我建议正确的方法吗

提前谢谢

HTML:

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

.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;}
 }

试试这个-

试试这个-

---

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

要减小圆的大小，只需添加

height:px和
宽度：px到动画的最后一个阶段
请注意，如果希望它仅在最后一个部分（反弹到顶部）上减小，则需要指定
高度
和
宽度
值仍然是75%阶段的起始值
由于要更改圆的大小，动画将在结尾处“跳跃”回其现有形式。这是因为，默认情况下，CSS动画不是持久的。在恢复到正常状态之前，所做的任何更改的持续时间仅与动画的持续时间相同
如果希望更改保持不变并在动画结束后保持不变，则需要使用
动画填充模式：前进

我已经在您的原始JSFIDLE上创建了一个编辑，其中包含了上述所有更改。
一些内容。底部有一个JSFIDLE，它显示了我列出的所有内容：

要减小圆的大小，只需添加
height:px和
宽度：px到动画的最后一个阶段
请注意，如果希望它仅在最后一个部分（反弹到顶部）上减小，则需要指定
高度
和
宽度
值仍然是75%阶段的起始值
由于要更改圆的大小，动画将在结尾处“跳跃”回其现有形式。这是因为，默认情况下，CSS动画不是持久的。在恢复到正常状态之前，所做的任何更改的持续时间仅与动画的持续时间相同
如果希望更改保持不变并在动画结束后保持不变，则需要使用
动画填充模式：前进

我已经在您的原始JSFIDLE上创建了一个包含上述所有更改的编辑。
您可以在
关键帧中修改div的
宽度
和
高度
，以获得所需的效果

@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%
之前保持球的大小不变，我们再次在该关键帧中定义
高度：100px
和
宽度：100px
 您可以修改
关键帧中div的
宽度
和
高度
，以获得所需效果

@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%
之前保持球的大小不变，我们再次在该关键帧中定义
高度：100px
和
宽度：100px
 我不确定。这就是你想要的吗？这就是我想做的。谢谢：）把这个作为答案。我不确定。这就是我想做的。谢谢：）将此作为答案移动。不。当圆落下时，它将保持不变，但当圆反弹到顶部时，它将减小其大小。不。当圆落下时，它将保持不变，但当圆反弹到顶部时，它将减小其大小。这对上下两个都有效自下而上和自下而上，他只需要在自下而上的条件下。这将适用于自上而下和自下而上，他只需要在自下而上的条件下。