How to animate a circle

Question

I dont know this , please can help me? I dont move a circle to right. in HTML5

<svg width=300 height=70><circle width=30 height=70 cx=30 cy=30 r=30 <animate attributeName=x from=0 to=300 dur="3s" repeatCount="10"></circle></svg> ?????

Answer 1

Golden Fish ,
Corrections:
1.quote attribute values, not compulsory as long as you use pixel unit but would help if you choose to make changes in unit.

2.circle svg element don't have height and width property. they have a radius defined with attribute "r"

so remove height and width.

3. Circle has cx and cy attribute (x and y coordinates of its center)

so attributeName="cx" not x

Corrected version:
<svg width="300" height="70">
<circle cx="30" cy="30" r="30">
<animate attributeName="cx" from="0" to="300" dur="3s" repeatCount="10">
</circle>
</svg>

Answer 2

with CSS or JavaScript ? as the circle can be created in SVG, CSS, or JavaScript and animated with CSS and or Javascript...

Answer 3

In html?

Answer 4

Golden Fish are you simply wanting to <marquee> movement

Answer 5

Here is a quick example.... https://code.sololearn.com/WE93KDiqYOYt/?ref=app

Answer 6

First of all draw a circle by canvas or svg tag in html then use animation or transition in js to move it, this is all the basic of simple movement.

Answer 7

This question is vague... can you please detail this more?

Answer 8

Don't use marquee it's deprecated.

see this lesson to understand svg animations :
https://www.sololearn.com/learn/HTML/2213/?ref=app

Answer 9

in css3 you can animate it easily with transform : translate(x,y,z); proerties.