animate 动画( 类似上下翻滚轮播图 )

之前用animate动画都是写一写样式，要不连续让图片旋转，要不就是hover时，让元素从边缘缓慢飘到中央。

今天，写一个让类似轮播图上下翻转的样式。

页面代码：

<!-- danmu -->
    <div class="danmu">
        <span class="danmuOne">吴女士已经预约成功 3秒前</span><br>
        <span class="danmuOne">赵女士已经预约成功 10秒前</span><br>
        <span class="danmuOne">钱先生已经预约成功 12秒前</span><br>
        <span class="danmuOne">孙女士已经预约成功 15秒前</span><br>
        <span class="danmuOne">李先生已经预约成功 18秒前</span><br>
        <span class="danmuOne">胡先生已经预约成功 21秒前</span><br>
        <span class="danmuOne">王女士已经预约成功 30秒前</span><br>
    </div>

样式代码：

/* danmu */
.danmu{
    width: 750/75rem;
    padding: 40/75rem 0;
    margin:0 auto;
    position:fixed;
    bottom:98/75rem;
    left:0;
    right:0;
    z-index: 9999;
}
.danmu .danmuOne{
    display: inline-block;
    height: 60/75rem;
    font-size: 30/75rem;
    color:#ffffff;
    background: rgba(0,0,0,0.8);
    border-radius: 30/75rem;
    padding: 0/75rem 60/75rem 0/75rem 30/75rem;
    line-height: 60/75rem;
    position: absolute;
    bottom:0%;
    opacity: 0;
}
.danmu .danmuOne.donghua{
    animation: theanimation 3s  alternate;
    -webkit-animation: theanimation 3s  alternate ;
    -moz-animation: theanimation 3s  alternate ;
    -o-animation: theanimation 3s  alternate ;
    -ms-animation: theanimation 3s  alternate ;
}
@keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-webkit-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-moz-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-o-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}
@-ms-keyframes theanimation{
  0% {bottom:0%;opacity:0;}
  10% {bottom:15%;opacity:0.5;}
  20% {bottom:30%;opacity:0.8;}
  40% {bottom:40%;opacity:1;}
  50% {bottom:40%;opacity:1;}
  60% {bottom:40%;opacity:1;}
  70% {bottom:40%;opacity:1;}
  80% {bottom:40%;opacity:1;}
  100% {bottom:100%;opacity:0;}
}

逻辑层：

// danmu
function myFunction() {
    var danmu = 0;
    var danmu_timer = null;
    var danmuList = $(".danmu .danmuOne");
    danmu_timer = setInterval(function(){
        danmu++;
        if(danmu>danmuList.length) danmu = 0;
        danmuList.eq(danmu).addClass('donghua').siblings().removeClass('donghua');
    }, 3500)
}
myFunction();

效果：从图中 0 位置过渡到 1 位置。