vue结合css3动画写弹幕

比如说：每隔8秒一次弹幕

vue 

<template>
   <div class="homelist">
      <div class="barrage-div" ref="marquee">
        <img :src="mathimg"/>
        新订单来自 {{mathname}} {{mathtime}}前
      </div>
   </div>
</template>

css

.barrage-div{
        position: fixed;
        box-sizing: border-box;
        color: #fff;
        bottom: 60px;
        left:-300px;
        height: 30px;
        line-height: 30px;
        padding-right: 10px;
        border: 0px solid #fff;
        border-radius: 15px;
        overflow-x: hidden;
        background-color: rgba(0,0,0,0.5);
        img{
            width: 26px;
            height: 26px;
            vertical-align: middle;  //内联块元素，居中对齐
            padding-left: 2px;
            border-radius: 50%;
        }
}
@keyframes myfirst
{
	0%   {left:100%;}
	25%  {left:50%}
	50%  {left:0%}
	75%  {left:-50%}
	100% {left:-100%;}
}
 
@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {left:100%;}
	25%  {left:50%}
	50%  {left:0%}
	75%  {left:-50%}
	100% {left:-100%;}
}

js

barrageList:[//data定义
        {name:'叶落森',time:'20s',img:'../../../static/images/head1.jpg'},
        {name:'785瞅瞅',time:'10s',img:'../../../static/images/head2.jpg'},
        {name:'落泪～',time:'60s',img:'../../../static/images/head3.jpg'},
        {name:'忧伤的小丑～',time:'45s',img:'../../../static/images/head4.jpg'},
        {name:'happy',time:'28s',img:'../../../static/images/head5.jpg'},
        {name:'yls',time:'48s',img:'../../../static/images/head6.jpg'},
 ],

marqueeload(value){//methods中的方法
      let mathnum=Math.floor(Math.random()*20+1)
      this.mathname=this.barrageList[mathnum].name
      this.mathtime=this.barrageList[mathnum].time
      this.mathimg=this.barrageList[mathnum].img
      this.$refs.marquee.style.animation='myfirst 8s'
      this.$refs.marquee.style.animationTimingFunction='linear'
}  


mounted() {
    let that=this;
    that.marqueeload()     
    this.time1=setInterval(()=>{
        that.$refs.marquee.style.animation=''
        that.$refs.marquee.style.animationTimingFunction=''
        that.marqueeload()
    },8000)
},
beforeDestroy(){
    clearInterval(this.time1);
    this.time1=null
}