smooth bounce animation css
<html>
<head>
<style>
span
{
font-size:30px;
display:inline-block;
}
.s
{
animation: anm2 0.8s infinite alternate;
}
.s1
{
animation-delay: 0.1s;
}
.s2
{
animation-delay: 0.2s;
}
.s3
{
animation-delay: 0.3s;
}
.s4
{
animation-delay: 0.4s;
}
.s5
{
animation-delay: 0.5s;
}
.s6
{
animation-delay: 0.6s;
}
.s7
{
animation-delay: 0.7s;
}
@keyframes anm2
{
100%
{
transform:translateY(-20px);
}
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<span class="s s1">w</span>
<span class="s s2">e</span>
<span class="s s3">l</span>
<span class="s s4">c</span>
<span class="s s5">o</span>
<span class="s s6">m</span>
<span class="s s7">e</span>
</div>
</div>
</body>
</html>
0 Comments