CSS 3浮动文本左上角的关键帧动画

Question

我尝试了许多不同的方法来向这个关键帧动画添加文本，但问题是，当我包含包含文本的div时，它会弄乱其中一个动画。理想情况下，我希望文本位于中间和顶部或中间和左上方，但当我做到这一点时，它会抛出动画中的最后一个span。我如何编辑类waitingtext，使它不干扰动画?

网站，我得到的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

这与定位无关，但与CSS选择器有关

:nth-child()(您正在使用的)计数父元素的所有子元素，包括您添加的div。您需要的是nth-of-type()，它只计算跨度