css animation:- jumping word
This is css code<style>
/*this is animation part open*/
/* animation name is jump*/
@keyframes jump{
0%{
position:relative;
max-width:100px;
max-height:100px;
margin:100px 0px 0px 0px;
font-size:0px;
position:relative;
}
30%{
position:relative;
min-width:100px;
max-height:100px;
margin:20px 0px 0px 0px;
font-size:30px;
color:#27DEDD;}
60%{
position:relative;
min-width:100px;
max-height:100px;
margin:30px 0px 0px 0px;
font-size:50px;
color:#A51616;
}
100%{
position:relative;
min-width:100px;
max-height:100px;
margin:100px 0px 0px 0px;
font-size:80px;
color:#871694;
}
}
/*this is animation part end*/
/*calling the animation */
.j1{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:0.5s;
}
.j2{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:1s;
}
/*https://cssofstyle.blogspot.in*/
.j3{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:1.5s;
}
.j4{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:2s;
}
.j5{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:2.5s;
}
.j6{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:3s;
}
.j7{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:3.5s;
}
.j8{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:4s;
}
.j9{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:4.5s;
}
.j10{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:5s;
}
.j11{
font-size:0px;
min-width:100px;
max-height:100px;
animation:jump 0.5s linear infinite alternate;
animation-delay:5.5s;
}
/*calling in span because span is inline element*/
/* this is div element to line block*/
.margin{
height:100px;
}
</style>
This html code
<div class="margin">
<center>
<span class='j1'>J</span>
<span class='j2'>W</span>
<span class='j3'>U</span>
<span class='j4'>O</span>
<span class='j5'>M</span>
<span class='j6'>R</span>
<span class='j7'>P</span>
<span class='j8'>D</span>
<span class='j9'>E</span>
<span class='j10'>S</span>
<span class='j11'>D</span>
</center>
</div>
Try this animation
Comments