Animate text for using as title, headlines or any other special heading with html and css coding by code4animate

Animation with html and css coding.

This animation can be used for creating site title, special or important headlines to highlight from other.

C

o

d

e

4

A

n

i

m

a

t

e

L

i

k

e

A

n

d

S

h

a

r

e

Loading animation of dot(circles ) with html coding by code4animate

Animation with html and css coding.

This animation is created with svg and circle tag and its color and radius of circle is changed with animate tag of html.

This animation does't depend on pixel so zoom as your browser can for larger size without lose of quality.

Animation with HTML line tag and CSS @keyframes property by code4animate

Animation with html and css coding.

This animation is created with line tag and its color is changed with @keyframes .

This animation does't depend on pixel so zoom as your browser can for larger size without lose of quality.

What you need for creating animation like above.

• Basic knowledge of html and css.
• Text editor like notepad , better if you use Standard code editor.

Old animation related to this animation
1. Animation with HTML line tag and CSS @keyframes having beautiful look by top4ways
2. New edition of Animation with html and css (line, animate and and css property) - top4ways
3. Animation with html and css (line, animate and and css property) - top4ways

Lets start coding to create animation like this one.

Step first:- Open an text editor and write the basic structure of html5 and start coding as in step below
Step second :- Now create svg elements and define its height and width ( In this animation height=600 and width=600). As in below code
<svg height="600" width="600"> </svg>

Step third :-Now create line tags for this animation as in below code

x1 and y1 defines the start point of line and x2 and y2 define ending point of line.
<svg width="600" height="600"> <line y1="10" x1="0" y2="500" x2="300" /> <line y1="10" x1="30" y2="500" x2="300" /> <line y1="10" x1="60" y2="500" x2="300" /> <line y1="10" x1="90" y2="500" x2="300" /> <line y1="10" x1="120" y2="500" x2="300" /> <line y1="10" x1="150" y2="500" x2="300" /> <line y1="10" x1="180" y2="500" x2="300" /> <line y1="10" x1="210" y2="500" x2="300" /> <line y1="10" x1="240" y2="500" x2="300" /> <line y1="10" x1="270" y2="500" x2="300" /> <line y1="10" x1="300" y2="500" x2="300" /> <line y1="10" x1="330" y2="500" x2="300" /> <line y1="10" x1="360" y2="500" x2="300" /> <line y1="10" x1="390" y2="500" x2="300" /> <line y1="10" x1="420" y2="500" x2="300" /> <line y1="10" x1="450" y2="500" x2="300" /> <line y1="10" x1="480" y2="500" x2="300" /> <line y1="10" x1="510" y2="500" x2="300" /> <line y1="10" x1="540" y2="500" x2="300" /> <line y1="10" x1="570" y2="500" x2="300" /> <line y1="10" x1="600" y2="500" x2="300" /> <line y1="590" x1="0" y2="100" x2="300" /> <line y1="590" x1="30" y2="100" x2="300" /> <line y1="590" x1="60" y2="100" x2="300" /> <line y1="590" x1="90" y2="100" x2="300" /> <line y1="590" x1="120" y2="100" x2="300" /> <line y1="590" x1="150" y2="100" x2="300" /> <line y1="590" x1="180" y2="100" x2="300" /> <line y1="590" x1="210" y2="100" x2="300" /> <line y1="590" x1="240" y2="100" x2="300" /> <line y1="590" x1="270" y2="100" x2="300" /> <line y1="590" x1="300" y2="100" x2="300" /> <line y1="590" x1="330" y2="100" x2="300" /> <line y1="590" x1="360" y2="100" x2="300" /> <line y1="590" x1="390" y2="100" x2="300" /> <line y1="590" x1="420" y2="100" x2="300" /> <line y1="590" x1="450" y2="100" x2="300" /> <line y1="590" x1="480" y2="100" x2="300" /> <line y1="590" x1="510" y2="100" x2="300" /> <line y1="590" x1="540" y2="100" x2="300" /> <line y1="590" x1="570" y2="100" x2="300" /> <line y1="590" x1="600" y2="100" x2="300" /> <line x1="590" y1="0" y2="300" x2="100" /> <line x1="590" y1="30" y2="300" x2="100" /> <line x1="590" y1="60" y2="300" x2="100" /> <line x1="590" y1="90" y2="300" x2="100" /> <line x1="590" y1="120" y2="300" x2="100" /> <line x1="590" y1="150" y2="300" x2="100" /> <line x1="590" y1="180" y2="300" x2="100" /> <line x1="590" y1="210" y2="300" x2="100" /> <line x1="590" y1="240" y2="300" x2="100" /> <line x1="590" y1="270" y2="300" x2="100" /> <line x1="590" y1="300" y2="300" x2="100" /> <line x1="590" y1="330" y2="300" x2="100" /> <line x1="590" y1="360" y2="300" x2="100" /> <line x1="590" y1="390" y2="300" x2="100" /> <line x1="590" y1="420" y2="300" x2="100" /> <line x1="590" y1="450" y2="300" x2="100" /> <line x1="590" y1="480" y2="300" x2="100" /> <line x1="590" y1="510" y2="300" x2="100" /> <line x1="590" y1="540" y2="300" x2="100" /> <line x1="590" y1="570" y2="300" x2="100" /> <line x1="590" y1="600" y2="300" x2="100" /> <line x1="10" y1="0" y2="300" x2="500" /> <line x1="10" y1="30" y2="300" x2="500" /> <line x1="10" y1="60" y2="300" x2="500" /> <line x1="10" y1="90" y2="300" x2="500" /> <line x1="10" y1="120" y2="300" x2="500" /> <line x1="10" y1="150" y2="300" x2="500" /> <line x1="10" y1="180" y2="300" x2="500" /> <line x1="10" y1="210" y2="300" x2="500" /> <line x1="10" y1="240" y2="300" x2="500" /> <line x1="10" y1="270" y2="300" x2="500" /> <line x1="10" y1="300" y2="300" x2="500" /> <line x1="10" y1="330" y2="300" x2="500" /> <line x1="10" y1="360" y2="300" x2="500" /> <line x1="10" y1="390" y2="300" x2="500" /> <line x1="10" y1="420" y2="300" x2="500" /> <line x1="10" y1="450" y2="300" x2="500" /> <line x1="10" y1="480" y2="300" x2="500" /> <line x1="10" y1="510" y2="300" x2="500" /> <line x1="10" y1="540" y2="300" x2="500" /> <line x1="10" y1="570" y2="300" x2="500" /> <line x1="10" y1="600" y2="300" x2="500" /> </svg>

Step fourth: - Now define css for changing the color of line for this animation as in below code

<style> line{ stroke:#00F0F0; stroke-linecap:round; stroke-width:7; animation-name:change_colora1; animation-iteration-count:infinite; animation-duration:5s; } @keyframes change_colora1{ 20%{stroke:red;} 40%{stroke:green;} 60%{stroke:gray;} 80%{stroke:blue;} 100%{stroke:#00F0F0;} } </style>

Step fifth :- Now combine and save this codes in a right way and Run it on browser.

Animation with HTML line tag and CSS @keyframes having beautiful look by Code4animate

Animation with html and css coding.

This animation is created with line tag and its color is changed with @keyframes .

What you need for creating animation like above.

• Basic knowledge of html and css.
• Text editor like notepad , better if you use Standard code editor.

Old animation related to this animation
1. A animation with html tag used for creating a line and circle
2. New edition of Animation with html and css (line, animate and and css property) - top4ways
3. Animation with html and css (line, animate and and css property) - top4ways

Lets start coding to create animation like this one.

Step first:- Open an text editor and write the basic structure of html5 and start coding as in step below
Step second :- Now create svg elements and define its height and width ( In this animation height=600 and width=600). As in below code
<svg height="600" width="600"> </svg>

Step third :-Now create line tags for this animation as in below code

x1 and y1 defines the start point of line and x2 and y2 define ending point of line.
<svg width="600" height="600"> /*lines from center to top*/ <line y1="10" x1="0" y2="300" x2="300" /> <line y1="10" x1="30" y2="300" x2="300" /> <line y1="10" x1="60" y2="300" x2="300" /> <line y1="10" x1="90" y2="300" x2="300" /> <line y1="10" x1="120" y2="300" x2="300" /> <line y1="10" x1="150" y2="300" x2="300" /> <line y1="10" x1="180" y2="300" x2="300" /> <line y1="10" x1="210" y2="300" x2="300" /> <line y1="10" x1="240" y2="300" x2="300" /> <line y1="10" x1="270" y2="300" x2="300" /> <line y1="10" x1="300" y2="300" x2="300" /> <line y1="10" x1="330" y2="300" x2="300" /> <line y1="10" x1="360" y2="300" x2="300" /> <line y1="10" x1="390" y2="300" x2="300" /> <line y1="10" x1="420" y2="300" x2="300" /> <line y1="10" x1="450" y2="300" x2="300" /> <line y1="10" x1="480" y2="300" x2="300" /> <line y1="10" x1="510" y2="300" x2="300" /> <line y1="10" x1="540" y2="300" x2="300" /> <line y1="10" x1="570" y2="300" x2="300" /> <line y1="10" x1="600" y2="300" x2="300" /> /*from center to bottom*/ <line y1="590" x1="0" y2="300" x2="300" /> <line y1="590" x1="30" y2="300" x2="300" /> <line y1="590" x1="60" y2="300" x2="300" /> <line y1="590" x1="90" y2="300" x2="300" /> <line y1="590" x1="120" y2="300" x2="300" /> <line y1="590" x1="150" y2="300" x2="300" /> <line y1="590" x1="180" y2="300" x2="300" /> <line y1="590" x1="210" y2="300" x2="300" /> <line y1="590" x1="240" y2="300" x2="300" /> <line y1="590" x1="270" y2="300" x2="300" /> <line y1="590" x1="300" y2="300" x2="300" /> <line y1="590" x1="330" y2="300" x2="300" /> <line y1="590" x1="360" y2="300" x2="300" /> <line y1="590" x1="390" y2="300" x2="300" /> <line y1="590" x1="420" y2="300" x2="300" /> <line y1="590" x1="450" y2="300" x2="300" /> <line y1="590" x1="480" y2="300" x2="300" /> <line y1="590" x1="510" y2="300" x2="300" /> <line y1="590" x1="540" y2="300" x2="300" /> <line y1="590" x1="570" y2="300" x2="300" /> <line y1="590" x1="600" y2="300" x2="300" /> /*from center to right*/ <line x1="590" y1="0" x2="300" y2="300" /> <line x1="590" y1="30" x2="300" y2="300" /> <line x1="590" y1="60" x2="300" y2="300" /> <line x1="590" y1="90" x2="300" y2="300" /> <line x1="590" y1="120" x2="300" y2="300" /> <line x1="590" y1="150" x2="300" y2="300" /> <line x1="590" y1="180" x2="300" y2="300" /> <line x1="590" y1="210" x2="300" y2="300" /> <line x1="590" y1="240" x2="300" y2="300" /> <line x1="590" y1="270" x2="300" y2="300" /> <line x1="590" y1="300" x2="300" y2="300" /> <line x1="590" y1="330" x2="300" y2="300" /> <line x1="590" y1="360" x2="300" y2="300" /> <line x1="590" y1="390" x2="300" y2="300" /> <line x1="590" y1="420" x2="300" y2="300" /> <line x1="590" y1="450" x2="300" y2="300" /> <line x1="590" y1="480" x2="300" y2="300" /> <line x1="590" y1="510" x2="300" y2="300" /> <line x1="590" y1="540" x2="300" y2="300" /> <line x1="590" y1="570" x2="300" y2="300" /> <line x1="590" y1="600" x2="300" y2="300" /> /*from center to left*/ <line x1="10" y1="0" x2="300" y2="300" /> <line x1="10" y1="30" x2="300" y2="300" /> <line x1="10" y1="60" x2="300" y2="300" /> <line x1="10" y1="90" x2="300" y2="300" /> <line x1="10" y1="120" x2="300" y2="300" /> <line x1="10" y1="150" x2="300" y2="300" /> <line x1="10" y1="180" x2="300" y2="300" /> <line x1="10" y1="210" x2="300" y2="300" /> <line x1="10" y1="240" x2="300" y2="300" /> <line x1="10" y1="270" x2="300" y2="300" /> <line x1="10" y1="300" x2="300" y2="300" /> <line x1="10" y1="330" x2="300" y2="300" /> <line x1="10" y1="360" x2="300" y2="300" /> <line x1="10" y1="390" x2="300" y2="300" /> <line x1="10" y1="420" x2="300" y2="300" /> <line x1="10" y1="450" x2="300" y2="300" /> <line x1="10" y1="480" x2="300" y2="300" /> <line x1="10" y1="510" x2="300" y2="300" /> <line x1="10" y1="540" x2="300" y2="300" /> <line x1="10" y1="570" x2="300" y2="300" /> <line x1="10" y1="600" x2="300" y2="300" /> </svg>

Step fourth: - Now define css for changing the color of line for this animation as in below code

<style> line{ stroke:#00F0F0; stroke-linecap:round; stroke-width:7; animation-name:change_colorb1; animation-iteration-count:infinite; animation-duration:5s; } @keyframes change_colorb1{ 20%{stroke:red;} 40%{stroke:green;} 60%{stroke:orange;} 80%{stroke:blue;} 100%{stroke:#00F0F0;} } </style>

Step fifth :- Now combine and save this codes in a right way and Run it on browser.

Animation with html and css coding like div, keframes and more by code4animate

Animation with html and css coding. This animation is created with 60 div element placed in a line and each div has an id="dsa1" but different class name (d1,d2,d3.........da60).

What you need for creating animation like above.

• Basic knowledge of html and css.
• Text editor like notepad , better if you use Standard code editor.

This animation is new version of Animation with div tag of html and css coding by top4ways
Lets start coding to create animation like this one.
Step first:- Open an text editor and write the basic structure of html5 and start coding as in step below
Step second :- Now create div elements and give same class name to all div and different id to all.and again create equal number of div tag with another class name for all and different id name. As in below code
<!--up to down --> <div id="dsa" class="d1"> </div> <div id="dsa" class="d2"> </div> <div id="dsa" class="d3"> </div> <div id="dsa" class="d4"> </div> <div id="dsa" class="d5"> </div> <div id="dsa" class="d6"> </div> <div id="dsa" class="d7"> </div> <div id="dsa" class="d8"> </div> <div id="dsa" class="d9"> </div> <div id="dsa" class="d10"> </div> <div id="dsa" class="d11"> </div> <div id="dsa" class="d12"> </div> <div id="dsa" class="d13"> </div> <div id="dsa" class="d14"> </div> <div id="dsa" class="d15"> </div> <div id="dsa" class="d16"> </div> <div id="dsa" class="d17"> </div> <div id="dsa" class="d18"> </div> <div id="dsa" class="d19"> </div> <div id="dsa" class="d20"> </div> <div id="dsa" class="d21"> </div> <div id="dsa" class="d22"> </div> <div id="dsa" class="d23"> </div> <div id="dsa" class="d24"> </div> <div id="dsa" class="d25"> </div> <div id="dsa" class="d26"> </div> <div id="dsa" class="d27"> </div> <div id="dsa" class="d28"> </div> <div id="dsa" class="d29"> </div> <div id="dsa" class="d30"> </div> <div id="dsa" class="d31"> </div> <div id="dsa" class="d32"> </div> <div id="dsa" class="d33"> </div> <div id="dsa" class="d34"> </div> <div id="dsa" class="d35"> </div> <div id="dsa" class="d36"> </div> <div id="dsa" class="d37"> </div> <div id="dsa" class="d38"> </div> <div id="dsa" class="d39"> </div> <div id="dsa" class="d40"> </div> <div id="dsa" class="d41"> </div> <div id="dsa" class="d42"> </div> <div id="dsa" class="d43"> </div> <div id="dsa" class="d44"> </div> <div id="dsa" class="d45"> </div> <div id="dsa" class="d46"> </div> <div id="dsa" class="d47"> </div> <div id="dsa" class="d48"> </div> <div id="dsa" class="d49"> </div> <div id="dsa" class="d50"> </div> <div id="dsa" class="d51"> </div> <div id="dsa" class="d52"> </div> <div id="dsa" class="d53"> </div> <div id="dsa" class="d54"> </div> <div id="dsa" class="d55"> </div> <div id="dsa" class="d56"> </div> <div id="dsa" class="d57"> </div> <div id="dsa" class="d58"> </div> <div id="dsa" class="d59"> </div> <!--down to up--> <div id="dsa1" class="da1"> </div> <div id="dsa1" class="da2"> </div> <div id="dsa1" class="da3"> </div> <div id="dsa1" class="da4"> </div> <div id="dsa1" class="da5"> </div> <div id="dsa1" class="da6"> </div> <div id="dsa1" class="da7"> </div> <div id="dsa1" class="da8"> </div> <div id="dsa1" class="da9"> </div> <div id="dsa1" class="da10"> </div> <div id="dsa1" class="da11"> </div> <div id="dsa1" class="da12"> </div> <div id="dsa1" class="da13"> </div> <div id="dsa1" class="da14"> </div> <div id="dsa1" class="da15"> </div> <div id="dsa1" class="da16"> </div> <div id="dsa1" class="da17"> </div> <div id="dsa1" class="da18"> </div> <div id="dsa1" class="da19"> </div> <div id="dsa1" class="da20"> </div> <div id="dsa1" class="da21"> </div> <div id="dsa1" class="da22"> </div> <div id="dsa1" class="da23"> </div> <div id="dsa1" class="da24"> </div> <div id="dsa1" class="da25"> </div> <div id="dsa1" class="da26"> </div> <div id="dsa1" class="da27"> </div> <div id="dsa1" class="da28"> </div> <div id="dsa1" class="da29"> </div> <div id="dsa1" class="da30"> </div> <div id="dsa1" class="da31"> </div> <div id="dsa1" class="da32"> </div> <div id="dsa1" class="da33"> </div> <div id="dsa1" class="da34"> </div> <div id="dsa1" class="da35"> </div> <div id="dsa1" class="da36"> </div> <div id="dsa1" class="da37"> </div> <div id="dsa1" class="da38"> </div> <div id="dsa1" class="da39"> </div> <div id="dsa1" class="da40"> </div> <div id="dsa1" class="da41"> </div> <div id="dsa1" class="da42"> </div> <div id="dsa1" class="da43"> </div> <div id="dsa1" class="da44"> </div> <div id="dsa1" class="da45"> </div> <div id="dsa1" class="da46"> </div> <div id="dsa1" class="da47"> </div> <div id="dsa1" class="da48"> </div> <div id="dsa1" class="da49"> </div> <div id="dsa1" class="da50"> </div> <div id="dsa1" class="da51"> </div> <div id="dsa1" class="da52"> </div> <div id="dsa1" class="da53"> </div> <div id="dsa1" class="da54"> </div> <div id="dsa1" class="da55"> </div> <div id="dsa1" class="da56"> </div> <div id="dsa1" class="da57"> </div> <div id="dsa1" class="da58"> </div> <div id="dsa1" class="da59"> </div>
Step third :- Now create stylesheet with style tag and define appearance of div by selecting id and class name as in below code.
/*up to down*/ #dsa{ background-color:green; border-width:5px; width:20px; height:20px; position:fixed; top:200px; animation-name:animup; animation-iteration-count:infinite; animation-duration:.8s; border-radius:10px; } .d1{left:10px;animation-delay:0.1s;} .d2{left:20px;animation-delay:0.2s;} .d3{left:30px;animation-delay:0.3s;} .d4{left:40px;animation-delay:0.4s;} .d5{left:50px;animation-delay:0.5s;} .d6{left:60px;animation-delay:0.6s;} .d7{left:70px;animation-delay:0.7s;} .d8{left:80px;animation-delay:0.8s;} .d9{left:90px;animation-delay:0.9s;} .d10{left:100px;animation-delay:1s;} .d11{left:110px;animation-delay:1.1s;} .d12{left:120px;animation-delay:1.2s;} .d13{left:130px;animation-delay:1.3s;} .d14{left:140px;animation-delay:1.4s;} .d15{left:150px;animation-delay:1.5s;} .d16{left:160px;animation-delay:1.6s;} .d17{left:170px;animation-delay:1.7s;} .d18{left:180px;animation-delay:1.8s;} .d19{left:190px;animation-delay:1.9s;} .d20{left:200px;animation-delay:2s;} .d21{left:210px;animation-delay:2.1s;} .d22{left:220px;animation-delay:2.2s;} .d23{left:230px;animation-delay:2.3s;} .d24{left:240px;animation-delay:2.4s;} .d25{left:250px;animation-delay:2.5s;} .d26{left:260px;animation-delay:2.6s;} .d27{left:270px;animation-delay:2.7s;} .d28{left:280px;animation-delay:2.8s;} .d29{left:290px;animation-delay:2.9s;} .d30{left:300px;animation-delay:3s;} .d31{left:310px;animation-delay:3.1s;} .d32{left:320px;animation-delay:3.2s;} .d33{left:330px;animation-delay:3.3s;} .d34{left:340px;animation-delay:3.4s;} .d35{left:350px;animation-delay:3.5s;} .d36{left:360px;animation-delay:3.6s;} .d37{left:370px;animation-delay:3.7s;} .d38{left:380px;animation-delay:3.8s;} .d39{left:390px;animation-delay:3.9s;} .d40{left:400px;animation-delay:4.0s;} .d41{left:410px;animation-delay:4.1s;} .d42{left:420px;animation-delay:4.2s;} .d43{left:430px;animation-delay:4.3s;} .d44{left:440px;animation-delay:4.4s;} .d45{left:450px;animation-delay:4.5s;} .d46{left:460px;animation-delay:4.6s;} .d47{left:470px;animation-delay:4.7s;} .d48{left:480px;animation-delay:4.8s;} .d49{left:490px;animation-delay:4.9s;} .d50{left:500px;animation-delay:5s;} .d51{left:510px;animation-delay:5.1s;} .d52{left:520px;animation-delay:5.2s;} .d53{left:530px;animation-delay:5.3s;} .d54{left:540px;animation-delay:5.4s;} .d55{left:550px;animation-delay:5.6s;} .d56{left:560px;animation-delay:5.7s;} .d57{left:570px;animation-delay:5.8s;} .d58{left:580px;animation-delay:5.9s;} .d59{left:590px;animation-delay:6s;} /*down to up*/ #dsa1{ background-color:green; border-width:5px; width:20px; height:20px; position:fixed; top:200px; animation-name:animdown; animation-iteration-count:infinite; animation-duration:.8s; border-radius:10px; } .da1{left:10px;animation-delay:0.1s;} .da2{left:20px;animation-delay:0.2s;} .da3{left:30px;animation-delay:0.3s;} .da4{left:40px;animation-delay:0.4s;} .da5{left:50px;animation-delay:0.5s;} .da6{left:60px;animation-delay:0.6s;} .da7{left:70px;animation-delay:0.7s;} .da8{left:80px;animation-delay:0.8s;} .da9{left:90px;animation-delay:0.9s;} .da10{left:100px;animation-delay:1s;} .da11{left:110px;animation-delay:1.1s;} .da12{left:120px;animation-delay:1.2s;} .da13{left:130px;animation-delay:1.3s;} .da14{left:140px;animation-delay:1.4s;} .da15{left:150px;animation-delay:1.5s;} .da16{left:160px;animation-delay:1.6s;} .da17{left:170px;animation-delay:1.7s;} .da18{left:180px;animation-delay:1.8s;} .da19{left:190px;animation-delay:1.9s;} .da20{left:200px;animation-delay:2s;} .da21{left:210px;animation-delay:2.1s;} .da22{left:220px;animation-delay:2.2s;} .da23{left:230px;animation-delay:2.3s;} .da24{left:240px;animation-delay:2.4s;} .da25{left:250px;animation-delay:2.5s;} .da26{left:260px;animation-delay:2.6s;} .da27{left:270px;animation-delay:2.7s;} .da28{left:280px;animation-delay:2.8s;} .da29{left:290px;animation-delay:2.9s;} .da30{left:300px;animation-delay:3s;} .da31{left:310px;animation-delay:3.1s;} .da32{left:320px;animation-delay:3.2s;} .da33{left:330px;animation-delay:3.3s;} .da34{left:340px;animation-delay:3.4s;} .da35{left:350px;animation-delay:3.5s;} .da36{left:360px;animation-delay:3.6s;} .da37{left:370px;animation-delay:3.7s;} .da38{left:380px;animation-delay:3.8s;} .da39{left:390px;animation-delay:3.9s;} .da40{left:400px;animation-delay:4.0s;} .da41{left:410px;animation-delay:4.1s;} .da42{left:420px;animation-delay:4.2s;} .da43{left:430px;animation-delay:4.3s;} .da44{left:440px;animation-delay:4.4s;} .da45{left:450px;animation-delay:4.5s;} .da46{left:460px;animation-delay:4.6s;} .da47{left:470px;animation-delay:4.7s;} .da48{left:480px;animation-delay:4.8s;} .da49{left:490px;animation-delay:4.9s;} .da50{left:500px;animation-delay:5s;} .da51{left:510px;animation-delay:5.1s;} .da52{left:520px;animation-delay:5.2s;} .da53{left:530px;animation-delay:5.3s;} .da54{left:540px;animation-delay:5.4s;} .da55{left:550px;animation-delay:5.6s;} .da56{left:560px;animation-delay:5.7s;} .da57{left:570px;animation-delay:5.8s;} .da58{left:580px;animation-delay:5.9s;} .da59{left:590px;animation-delay:6s;}
Step fourth: - Now define css for animating div as in below code.
@keyframes animup { from{top:30px;} to{top:150;} 25%{background-color:yellow;} 50%{background-color:red;} 75%{background-color:blue;} 100%{background-color:orange;} } @keyframes animdown { from{top:150px;} to{top:30;} 25%{background-color:yellow;} 50%{background-color:red;} 75%{background-color:blue;} 100%{background-color:orange;} }
Step fifth :- Now combine and save this codes in a right way and Run it on browser.