vue结合animation实现页面消息动态轮动展示

背景：之前搞了一个也消息动态展示模块，但是不滚动啊！！！只是将第二条数据给第一条，第三条数据给第二条，一秒闪一下，从而实现动态展示，但觉得不是很连贯，不怎么好看，就改了一下。

先简单介绍一下animation样式

属性	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。
animation-play-state	控制动画执行状态 paused：暂停 running: 播放

语法
animation: name duration timing-function delay iteration-count direction;

let noticeList = [{title: "公告1", createDate: "2020-09-10 11:11:11"},
{title: "公告2", createDate: "2020-09-10 11:11:11"},
{title: "公告3", createDate: "2020-09-10 11:11:11"}]

html部分代码，需要结合循环来展示数据

<ul id="_announcements" class="inner-container">
    <li v-for="notice in noticeList">
        <a href="#">
            <span class="ico ico-c1"></span>
            <span class="tit">{{notice.title}}</span>
            <span class="time">{{notice.createDate}}</span>
        </a>
    </li>
</ul>

css部分代码

.inner-container {
  animation: myMove 80s linear 0s infinite;
}
#_announcements:hover {
  /* 控制动画执行状态 paused：暂停 running: 播放 */
  animation-play-state: paused;
}
/*文字无缝滚动*/
@keyframes myMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3000px);
  }
}

不清楚的小伙伴，可以留言，会尽量及时回复。