CSS 3 float text top left in keyframe animation

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