CSS 3 float text top left in keyframe animation - css

Question

I've tried many different ways to add text to this keyframe animation, but the problem is that it messes up one of the animations when I include the div containing the text. Ideally, I want the text to be center and top or center and top left, but when I get it there, it throws off the last span in the animation. How can I edit the class waitingtext so that it doesn't interfere with the animation?
Site where I got the css
HTML
<div class="main-loading" ng-show="mainloading">
<div class="waitingtext">My text</div>
<span class="main-loading"></span><!--
--><span></span><!--
--><span></span><!--
--><span></span><!--
--><span></span>
</div>
CSS
.waitingtext {
color:#FFF;
position: absolute;
z-index: -1;
line-height: 60px!important;
float: left;
margin-top: 5px;
}
div.main-loading
{
background: #1b7817;
opacity:.9;
position: absolute;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -200px;
text-align: center;
border:1px solid #dcdcdc;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px; padding-left: 5px
}
div.main-loading
{
position: absolute;
height: 300px;
top: 50%;
left: 50%;
line-height: 300px;
text-align: center;
clear: both;
}
.main-loading span
{
display: inline-block;
width: 10px;
height: 10px;
margin: 145px 3px 0;
background: rgba(255,255,255,0.25);
border-radius: 50%;
transform: translateY(0);
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
animation: wave 2s infinite ease-in-out;
-moz-animation: wave 2s infinite ease-in-out;
-webkit-animation: wave 2s infinite ease-in-out;
}
#keyframes wave
{
0%, 60%, 100%
{
background: rgba(255,255,255,0.25);
transform: translateY(0);
-moz-transform: translateY(0);
}
20%
{
background: rgba(255,255,255,0.75);
transform: translateY(13px);
-moz-transform: translateY(13px);
}
40%
{
background: rgba(255,255,255,0.75);
transform: translateY(-13px);
-moz-transform: translateY(-13px);
}
}
#-webkit-keyframes wave
{
0%, 60%, 100%
{
background: rgba(255,255,255,0.25);
transform: translateY(0);
-webkit-transform: translateY(0);
}
20%
{
background: rgba(255,255,255,0.75);
transform: translateY(13px);
-webkit-transform: translateY(13px);
}
40%
{
background: rgba(255,255,255,0.75);
transform: translateY(-13px);
-webkit-transform: translateY(-13px);
}
}
.main-loading span:nth-child(1)
{
animation-delay: 0s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
}
.main-loading span:nth-child(2)
{
animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
.main-loading span:nth-child(3)
{
animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
.main-loading span:nth-child(4)
{
animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
.main-loading span:nth-child(5)
{
animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}

Answer 1

This has nothing to do with positioning but everything to do with your CSS selectors
:nth-child() (what you were using) counts all of the children of the parent, including the div you added. What you need is nth-of-type(), which only counts the spans
Demo