Animation Css

Question

Hi guys!
How Can I Made 3 Circle With 3 Direction to move
By Css3 !????

Answer 1

Mmmm...
Too much long for even one post, so I save it in a code playground instead:

https://code.sololearn.com/WysTLAvYYCUx/?ref=app

Answer 2

with @keyframes

Answer 3

do you have the code?

Answer 4

I also tried some keyframes but nothing moved...

Answer 5

What have you tried as keyframes rules?
And what call you << 3 directions to move >>?

Moving them independently from each others isn't a problem, while you animate the properties used in each element specifically to position them (some use 'left' and 'top', others 'bottom' and 'right', or mix of them... this define different axis origins, and that may be respected in animation... in static definition, it may also be taken care that defining more than one position origin by axis will define an implicit width for the element: defining both 'left' and 'right' on a positioned element is interpreted as auto-width size to have a box with left side at 'left' value from the left origin axis, and same for right side:

+-----------------------------------------------------+
| |
| +--------------+ |
| | | |
|< left >| |< right > |
| |< >| |
| +--------------+ |
| implicite width |
+-----------------------------------------------------+

Try the css styles declaration I will post next (too much characters for only once post), it move infinitly your all 3 circles around viewport, each with different directions at a same time (synchronized all together, but this is not mandatory ^^)...

Answer 6

I Know! But Only 1 Circle Was Moved By Keyframes

Answer 7

Yes Bot In My Pc

Answer 8

https://code.sololearn.com/WuB1mDHqzo4v/?ref=app

Answer 9

This Is My Problem ! When Use Keyframes , Nothing Moved

Answer 10

Yes!!!!!!
very Very Thanks For Your Answere!
really Solved my Problem ❤️🙏