文字上下翻滚效果

<div class="data-box rescue1">

        <p class="count">{{dataObj.firstRescure}}</p>           

        <p class="text">一级救援</p>   

      </div> 

      <div class="data-box rescue2">

        <p class="count">{{dataObj.secondRescure}}</p>           

        <p class="text">二级救援</p>   

      </div> 

      <div class="data-box rescue3">

        <p class="count">{{dataObj.thirdRescure}}</p>           

        <p class="text">三级救援</p>   

      </div> 

 

.rescue1 {

  /* animation: rescue1Anmi 8s linear infinite; */

}

.rescue2 {

  top: 100px;

  /* animation: rescue2Anmi 8s 1s linear infinite; */

}

.rescue3 {

  top: 200px;

  /* animation: rescue3Anmi 8s  2s linear infinite; */

}

/* 救援动画 */

  @keyframes rescue1Anmi{

    0% { top: 0;opacity: 1}

    20% { top: -70px;opacity: 1}

 

    40% { top: -140px ;opacity: 0}

    60% { top: -210px ;opacity: 0}

 

    80% { top: 70px;opacity: 0}

    100%{ top: 0;opacity: 1}

  }

  @keyframes rescue2Anmi{ 

    0% { top: 70px;opacity: 1}

    20% { top: 0;opacity: 1}

 

    40% { top: -70px ;opacity: 1}

    60% { top: -140px ;opacity: 0}

 

    80% { top: 140px;opacity: 0}

    100%{ top: 70px;opacity: 1}

  }

  @keyframes rescue3Anmi{

    0% { top: 140px;opacity: 0}

    20% { top: 70px;opacity: 1}

 

    40% { top: 0 ;opacity: 1}

    60% { top: -70px ;opacity: 1}

    65% { top: -90px ;opacity: 0}

 

    80% { top: 210px;opacity: 0}

    100%{ top: 140px;opacity: 0}

  }