如何減小圓圈大小？

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 。