<div id="spinningTextG"><div id="spinningTextG_1" class="spinningTextG">L</div><div id="spinningTextG_2" class="spinningTextG">o</div><div id="spinningTextG_3" class="spinningTextG">a</div><div id="spinningTextG_4" class="spinningTextG">d</div><div id="spinningTextG_5" class="spinningTextG">i</div><div id="spinningTextG_6" class="spinningTextG">n</div><div id="spinningTextG_7" class="spinningTextG">g</div></div>
#spinningTextG{
width:234px;
margin:auto;
height:29px;
}
.spinningTextG{
color:rgb(0,0,0);
font-family:Arial;
font-size:24px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_spinningTextG;
-o-animation-name:bounce_spinningTextG;
-ms-animation-name:bounce_spinningTextG;
-webkit-animation-name:bounce_spinningTextG;
-moz-animation-name:bounce_spinningTextG;
animation-duration:1.5s;
-o-animation-duration:1.5s;
-ms-animation-duration:1.5s;
-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.3);
-o-transform:scale(.3);
-ms-transform:scale(.3);
-webkit-transform:scale(.3);
-moz-transform:scale(.3);
}
#spinningTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#spinningTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#spinningTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#spinningTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#spinningTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#spinningTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#spinningTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
@keyframes bounce_spinningTextG{
0%{
transform:scale(1);
color:rgb(0,0,0);
}
100%{
transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-o-keyframes bounce_spinningTextG{
0%{
-o-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-o-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-ms-keyframes bounce_spinningTextG{
0%{
-ms-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-ms-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-webkit-keyframes bounce_spinningTextG{
0%{
-webkit-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
@-moz-keyframes bounce_spinningTextG{
0%{
-moz-transform:scale(1);
color:rgb(0,0,0);
}
100%{
-moz-transform:scale(.3) rotate(90deg);
color:rgb(255,255,255);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.