How does this css3 animation work?

Question

I wanted to draw a curved animation, and after a lot of coding of monkeys, I get the desired result. But I'm stuck how it works!

Check out this image: demo

Now let's see this picture: demo

I got the desired animation, which is a curved animation after removing left: 50px;from50% keyframes

But I wanted to know how it gets curved, because its initial position left: 50px;, and not? Even if I did not set the left value, it should go like the previous one, but it is surprising that it bends. So, does anyone have an idea about this?

Answer 1

MDN - @keyframes

, ,

, , animation-timing-function, ease .

linear, ,

#ball {
    animation-timing-function: linear;
}

. JSFiddle

Answer 2

, , .

(.. ), .

:

0%{bottom: 0%; left:0%;}
50%{bottom: 0%;}/*the left property is left(removed)*/
100%{bottom: 100%; left: 100%;}

50% ( 0%) = 0%, ( 100%) = 100%. , , 50% , , 0% 1%, 2%, 3%, 4% .. , () () left, .

, .

, .

demo, .

P/s: -, -.

yourslef:: , , , , .