如何減少圈子大小？

我有一個div這是shape.I圈做了animation事情CSS。現在我想做的事情時，圈去底再繞size保持不變（現在這是確定對我來說），但是當圓反彈頂部則圓減少它的size。我不知道，是有可能與CSS？我在JS非常周。任何人都可以解決我的問題或建議我正確的方式嗎？如何減少圈子大小？

JsFiddle Link

在此先感謝。

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

來源

2015-12-21 Chonchol Mahmud

我不確定。這是你在尋找什麼https://jsfiddle.net/7qp8cjxe/2/ – abhishekkannojia

這是我想做的。謝謝:) –

移動此爲答案。 – abhishekkannojia

幾件事情。有在底部的jsfiddle這說明一切，我列出：

爲了減少圓圈大小，只需添加height: <whatever>px;和width:<whatever>px;到動畫的最後階段。
請注意，如果您希望只在最後一部分（即彈回到頂部）減少，則需要指定height和width值仍然是75％階段的起始值。
因爲你改變了一圈，動畫將「跳」末回其存在形式的大小。這是因爲，默認情況下，CSS動畫不是持久的。只要動畫恢復到正常狀態，只需進行一次更改即可。
如果你想改變是持久而留在動畫結束後，你需要使用animation-fill-mode: forwards;。

我在原始JSFiddle上創建了一個編輯，其中包含上述所有更改Here。

來源

2015-12-21 09:58:40

試試這個 - fiddle

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

來源

2015-12-21 09:48:28

沒有。當圓到底時它將保持不變，但是當圓反彈到最高時，它會縮小其大小。 –

您可以修改您的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} 
}

FIDDLE

我們正在減少的寬度和圓的高度在所述關鍵幀100%所以當球從關鍵幀75%反彈即到100%球被動畫化以更小的尺寸。請注意，爲了保持球的大小一直到關鍵幀75%，我們再次在該關鍵幀中定義height:100px和width:100px。

來源

2015-12-21 10:03:02 abhishekkannojia

它會從上到下和從下到上工作，他只需要從下到上的條件。 – devpro

如何減少圈子大小？

回答

相關問題