Animation with html and css coding. Take a look to animation first.
List of html tags used
- rect used for creating a rectangle.
- animate used for changing property of rectangle like x and y position ,color,width and height.
Lets start coding for creating above animation. Step first : Create an svg elements and define its height and width. Second step: insert rect tag between the opening and closing tag of svg and define its property:-
- x position of top-left corner of rectangle on x axis
- y position of top-left corner of rectangle on y axis
- width and height(You can leave if you want to animate it continues.)
- fill define color of rectangle
Step third: Write animate tag inside the opening and closing tag of rect(rectangle) and define its property:
- attributeName used to select attribute of rectangle,circle and other svg elements that can be changed with time
- from define initial value of attribute
- to define final value of attribute
- dur define time interval for change in value from initial value to final value .
- repeatCount define how many times the animation repeat.
After defining all appropriate value and attributes, the code looks like the below code :
Setp fourth: Now save this code text file with html extension and run it on any html supported browser.
No comments:
Post a Comment