如何减少圈子大小？

我有一个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

如何减少圈子大小？

回答

相关问题