<div class="remind-block">
	<div class="marquee-block">
		<div class="marquee-left">从左到右</div>
		<div class="marquee-right">从右到左</div>
	</div>
</div>
<style>
.remind-block {
	height: 60px;
	line-height: 30px;
	background-color: #fce9aa;
	color: #947334;
	position: relative;
	overflow: hidden;
	text-align: center;
	width: 100%;
	padding-right: 20px;
	z-index: 100;
}
.marquee-block{
	display: inline-block;
	width:100%;
	height: 100%;
	vertical-align: middle;
	overflow: hidden;
	box-sizing: border-box;
	padding-left: 15px;
	position: relative;
}
.marquee-left {
	animation: marquee 20s linear infinite;
	white-space: nowrap;
	position: absolute;
	top: 0px;
}
.marquee-right {
	animation: marqueeT 20s linear infinite;
	white-space: nowrap;
	position: absolute;
	top: 30px;
}
@keyframes marquee {
	0% { right: 110%; }
	100% { right: 0;}
}
@keyframes marqueeT {
	0% { left: 110%; }
	100% { left: 0; }
}
</style>

效果：