Html Css animation

css3 animation after two rectangle collision move back change to circle?after the collision how?code is in the answer i am trying but after collision how it is possible?

html css3 animation

26th Feb 2017, 6:11 PM

kundan

2 Answers

+ 4

Your question isn't accurate... Studying your code, I finally guess than you want ask WHY the rectangles are transformed in circle DURING the animation? This is due to the border-radius property at last step of your animation, so the border-radius value is interpolated from time 0% at 0px ( default value ) to time 100% at 200px: as this is the dimension of your two square, the final shapes are circles of radius 100px ( half side size is the maximum value possible )... To be convinced, try to replace the value of 200px by 100px: the only difference you will see, is that the transform from square to circle is more slow, as you interpolate from 0 to 100 in same time than previously to double, but still end with a circle... you can deduce that with a final value of 200, value of 100 is reached at time 50%, which is the step of collide just when square reach circle shape ^^

26th Feb 2017, 8:22 PM

visph

Kundan Dalvi: <!DOCTYPE html> <html> <head> <style> #main{width:1500px;height:400px;background:blue;position:relative} #img1{width:200px;height:200px;position:absolute;background:red;top:100px; -webkit-animation: img1 2s linear forwards; } @-webkit-keyframes img1 { 0%{top:100px;left:0px;} 50%{top:100px;left:450px} 100%{top:100px;left:0px;width:200px;height:200px;-webkit-border-radius:200px;} } #img2{width:200px;height:200px;position:absolute;background:red;top:100px;left:1300px; -webkit-animation: img2 2s linear forwards;} @-webkit-keyframes img2 { 0%{top:100px;left:1300px;} 50%{top:100px;left:650px} 100%{top:100px;left:1300px;-webkit-border-radius:200px;} } </style> </head> <body> <div id="main"> <div id="img1"></div> <div id="img2"></div> </div> </body> </hmtl>

26th Feb 2017, 6:11 PM

kundan