+ 4

How do you animate In HTML

How Do you animate in HTML with canvas

1st Sep 2018, 1:48 AM
Little Cupcake
Little Cupcake - avatar
5 Answers
+ 13
....adding to Dan Walker and Shashi Ranjan's answer, you can also use SVG's animate element (<animate>) for creating animations (only for objects/drawings created using the SVG tag) https://www.sololearn.com/learn/HTML/2213/
1st Sep 2018, 7:13 AM
Nikhil
Nikhil - avatar
+ 4
But canvas require the JS skill to work with. Instead for beginners, css is enough to animate with. Define your animation steps using @keyframes in css. For more information complete the CSS course here in the Sololearn.
1st Sep 2018, 3:04 AM
ŠØŠ°Ń‰Šø Š Š°Š½Š¶Š°Š½
ŠØŠ°Ń‰Šø Š Š°Š½Š¶Š°Š½ - avatar
+ 1
One way is to use the canvas in HTML5, there are some good tutorials online
1st Sep 2018, 2:57 AM
Dan Walker
Dan Walker - avatar
0
SVG (Scalable Vector Graphics) animations can be created using the <animate> element. The syntax of the code is as follows: <svg width="1000" height="250"> <rect width="150" height="150" fill="orange"> <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> </rect> </svg> where: svg=container for SVG graphics rect=defines a rectangle in SVG fill=specifies whether or not the attribute's value should return to its initial value when the animation is finished (Values: "remove" resets the value; "freeze" keeps the ā€œto valueā€) animate=used to animate an attribute of an SVG shape attributeName=specifies which attribute will be affected by the animation from=specifies the starting value of the attribute to=specifies the ending value of the attribute dur=specifies how long the animation runs (duration) repeatCount=specifies the repeat count of the animation
2nd Sep 2018, 9:50 AM
Rafey Iqbal Rahman
Rafey Iqbal Rahman - avatar