How to reduce circle size?

Question

I have a div which is circle in shape.I have done animation things with CSS .Now i want to do when circle go to bottom then circle size remain same (now this is ok for me) but when circle bounce back to top then circle reduce it's size .I don't know, is it possible with CSS ? I am very week in JS .Can anyone solve my problem or suggest me the right way?

JsFiddle Link

Thanks in advance.

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

A couple of things. There's a JSFiddle at the bottom which shows everything I list:

1. To reduce the circle size, just add height: <whatever>px; and width:<whatever>px; to the last stage of your animation.
2. Note that if you want it to only decrease over the last section (where it bounces back up to the top), you will need to specify that the height and width values are still the starting values at the 75% stage.
3. Because you're changing the size of the circle, the animation will "jump" at the end back to its existing form. This is because, by default, CSS animations aren't persistent. Whatever changes you make only last as long as the animation before reverting to normal.
4. If you want the change to be persistent and stay after the end of the animation, you need to use animation-fill-mode: forwards; .

I've created an edit on your original JSFiddle with all of the above changes Here .

Answer 2

试试这个- 小提琴

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

Answer 3

You can modify width and height of the div in your keyframes to get desired effect.

@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

We are reducing the width and height of circle in the keyframe 100% so when the ball bounces back ie from keyframe 75% to 100% ball is animated to a smaller size. Note that to keep the size of the ball same till keyframe 75% we are again defining height:100px and width:100px in that keyframe.