Animation with html and css coding.
This animation can be used for creating site title, special or important headlines to highlight from other.
R
O
B
O
T
2
.
O
L
i
k
e
A
n
d
S
h
a
r
e
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.
Recent animation posts
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) - code4animate.blogspot
3. Animation with html and css (line, animate and and css property) - code4animate.blogspot
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 below steps.
Step second :- Now create div element with different id name and same class name.
Place all this div element in an div with unique id or class name.One div for one letter.Example <div>a</div>). As in below code
<div id="store_div">
<div id="sp1" class="spn">C</div>
<div id="sp2" class="spn">o</div>
<div id="sp3" class="spn">d</div>
<div id="sp4" class="spn">e</div>
<div id="sp5" class="spn">4</div>
<div id="sp6" class="spn">A</div>
<div id="sp7" class="spn">n</div>
<div id="sp8" class="spn">i</div>
<div id="sp9" class="spn">m</div>
<div id="sp10" class="spn">a</div>
<div id="sp11" class="spn">t</div>
</div>
<div id="sp1" class="spn">C</div>
<div id="sp2" class="spn">o</div>
<div id="sp3" class="spn">d</div>
<div id="sp4" class="spn">e</div>
<div id="sp5" class="spn">4</div>
<div id="sp6" class="spn">A</div>
<div id="sp7" class="spn">n</div>
<div id="sp8" class="spn">i</div>
<div id="sp9" class="spn">m</div>
<div id="sp10" class="spn">a</div>
<div id="sp11" class="spn">t</div>
</div>
Step third :-After create div elements , define css for div elements appearance. As in below code
Change selectors value to customize yourself.
#store_div{
height:400px;
width:600px;
position:relative;
overflow:hidden;
}
.spn{
font-size:70px;
font-weight:700;
font-family:aerial;
margin-top:150px;
color:blue;
margin-left:7px;
display:inline-block;
animation: spn_anim 5.5s 100;
}
height:400px;
width:600px;
position:relative;
overflow:hidden;
}
.spn{
font-size:70px;
font-weight:700;
font-family:aerial;
margin-top:150px;
color:blue;
margin-left:7px;
display:inline-block;
animation: spn_anim 5.5s 100;
}
Step fourth: - Now define css for changing the color of letters and don't forget to code to make delay in animation for each letter otherwise all letters change color at same time, as in below code
@keyframes spn_anim {
10%{color:blue;}
30%{color:red;}
50%{color:green;}
70%{color:orange;}
100%{color:blue;}
}
#sp1{animation-delay:0s;}
#sp2 {animation-delay:0.5s;}
#sp3 {animation-delay:1s;}
#sp4 {animation-delay:1.5s;}
#sp5{animation-delay:2s;}
#sp6{animation-delay:2.5s;}
#sp7 {animation-delay:3s;}
#sp8 {animation-delay:3.5s;}
#sp9 {animation-delay:4s;}
#sp10 {animation-delay:4.5s;}
#sp11 {animation-delay:5s;}
#sp12 {animation-delay:5.5s;}
10%{color:blue;}
30%{color:red;}
50%{color:green;}
70%{color:orange;}
100%{color:blue;}
}
#sp1{animation-delay:0s;}
#sp2 {animation-delay:0.5s;}
#sp3 {animation-delay:1s;}
#sp4 {animation-delay:1.5s;}
#sp5{animation-delay:2s;}
#sp6{animation-delay:2.5s;}
#sp7 {animation-delay:3s;}
#sp8 {animation-delay:3.5s;}
#sp9 {animation-delay:4s;}
#sp10 {animation-delay:4.5s;}
#sp11 {animation-delay:5s;}
#sp12 {animation-delay:5.5s;}
No comments:
Post a Comment