Animation with html tag circle and rect and @keyframes css property by top4ways

What you need for this animation :-
●Basic knowledge of html and css.
●Text editor like Notepad, Better if you use any code editor.

List of html tags and css used

1. circle
2. style
3. svg
4. rect

Lets start coding for creating above animation :-
Step first: Create an svg elements and define its height and width.
Step second : create a rect tag with id or class and then create five circle tag with different id or class. As in below code: -
<svg height="600" width="600"> <rect id="recta1" ></rect> <circle id="circlea1" ></circle> <circle id="circlea2" ></circle> <circle id="circlea3" ></circle> <circle id="circlea4" ></circle> <circle id="circlea5" ></circle> </svg>
Step third: - After completing second step create a style tag and define cx , cy , fill and r of circle by selecting id or class name one by one for all circle.
Step fourth: - After completing third step define @keyframe for all circle and define value you want to chane with time.
After completing all the step the code looks like the below code: -
<svg height="600" width="600"> <rect id="recta1" ></rect> <circle id="circlea1" ></circle> <circle id="circlea2" ></circle> <circle id="circlea3" ></circle> <circle id="circlea4" ></circle> <circle id="circlea5" ></circle> </svg> <style> #recta1 { x:0; y:0; width:600; height:600; fill:skyblue; animation: recta1 9s linear infinite 2s; } @keyframes recta1 { 20%{fill:skyblue;} 40%{fill:pink;} 60%{fill:red;} 80%{fill:blue;} 100%{fill:skyblue;} } #circlea1{ cx:300; cy:300; r:20; fill:red; animation: circlea1 9s linear infinite 2s; } @keyframes circlea1 { 50%{r:120;} 100%{r:20;} 25%{cx:600;} 75%{cx:0;} 100%{cx:300;} 20%{fill:red;} 40%{fill:blue;} 60%{fill:green;} 80%{fill:pink;} 100%{fill:red;} } #circlea2{ cx:300; cy:300; r:20; fill:red; animation: circlea2 9s linear infinite 2s; } @keyframes circlea2 { 50%{r:120;} 100%{r:20;} 25%{cy:600;} 75%{cy:0;} 100%{cy{}:300;} 20%{fill:red;} 40%{fill:blue;} 60%{fill:green;} 80%{fill:pink;} 100%{fill:red;} } #circlea3{ cx:300; cy:300; r:20; fill:red; animation: circlea3 9s linear infinite 2s; } @keyframes circlea3 { 50%{r:120;} 100%{r:20;} 25%{cx:0;} 75%{cx:600;} 100%{cx:300;} 20%{fill:red;} 40%{fill:blue;} 60%{fill:green;} 80%{fill:pink;} 100%{fill:red;} } #circlea4{ cx:300; cy:300; r:20; fill:red; animation: circlea4 9s linear infinite 2s; } @keyframes circlea4 { 50%{r:120;} 100%{r:20;} 25%{cy:0;} 75%{cy:600;} 100%{cx:300;} 20%{fill:red;} 40%{fill:blue;} 60%{fill:green;} 80%{fill:pink;} 100%{fill:red;} } #circlea5{ cx:300; cy:300; r:20; fill:green; animation: circlea5 9s linear infinite 2s; } @keyframes circlea5 { 50%{r:120;} 100%{r:20;} 20%{fill:green;} 40%{fill:pink;} 60%{fill:red;} 80%{fill:blue;} 100%{fill:green;} } </style>
Step fifth: - Save this text file with html extension and run it on any html supported browsers.