My first animation. I need help

Hi! The following code is my first animation, how can I make the circle come back to it's initial position (50) smoothly? In other words, how can I apply the reverse animation? Thxxxx <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <svg height="1000" width="1000"> <circle width="300" height="150" cx="150" cy="150" r="50" fill="black" > <animate attributeName="r" from="50" to="100" fill="freeze" repeatCount="indefinite" dur="2s"/> </svg> </body> </html>

html5 circle animate

24th Feb 2017, 9:44 PM

Bibi

2 Answers

+ 2

There isn't a built-in way to do alternate just with a parameter, as you can do for a backward animation, but you can chain many different animations ( and you must close your shape tag, embeding the animation tag ^^ ): <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <svg height="1000" width="1000"> <circle width="300" height="150" cx="150" cy="150" r="50" fill="black" > <animate id="a1" begin="0s;a2.end" attributeName="r" from="50" to="100" fill="freeze" dur="2s"/> <animate id="a2" begin="a1.end" attributeName="r" from="100" to="50" fill="freeze" dur="2s"/> </circle> </svg> </body> </html>

25th Feb 2017, 1:40 AM

visph