CSS3实现内容左右移动动画

Html部分:
<div class="notice">
	 <ul class="ul1">
		    <li>质检结果需要保存才能永久存储，否则关闭页面会清空质检数据</li>
		    <li>使用遇到障碍？在左侧导航查看帮助</li>
		    <li>保存质检结果方式可设置手动或自动保存</li>
	 </ul>
</div>
Css样式:
.notice {
	  position: relative;
	  height: 25px;
	  line-height: 30px;
	  width: 100vw;
	  overflow: hidden;
	  background-color: #fff;	   
	  display: inline-block;
	  background-color: pink;
	  border-radius: 3px;
	  padding-bottom: 10px;
	}
	ul,li{
		margin: 0;
		padding: 0;
	}
	.ul1{
		position: absolute;
		left: 0;
		display: block;
		width: 2160px;
		list-style: none;
		-webkit-animation: move 25s linear infinite;
		animation: move 25s linear infinite;
	}
	li{
		display: block;
		float: left;
		margin-left: 10px;
		margin-right: 100px;
	}
	@keyframes move {
	  0% {
	  	left: 100vw;
	  }
	  
	  100% {
	  	left: -100vw;
	  }
	}

效果图1
效果图2