marquee.css

.marquee {
	position: relative;
	overflow: hidden;
	left: 100%;
	animation: anim-marquee 10s linear infinite;
}

.marqueeAlternate {
	position: relative;
	left: 100%;
	animation: anim-marquee 10s linear infinite alternate;
}

@keyframes anim-marquee {
	0% { transform: translateX(0%); }
	100% { transform: translateX(-100%); }
}

.marqueeReverse {
	position: relative;
	left: 100%;
	animation: anim-marqueeReverse 10s linear infinite;
}

@keyframes anim-marqueeReverse {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(0%); }
}

.marqueeSlide {
	animation: anim-marqueeSlide 10s linear;
}

@keyframes anim-marqueeSlide {
	0% { transform: translateX(100%); }
	100% { transform: translateX(0%); }
}

/* 右端の衝突判定がうまくいかない */
.marqueeReverseSlide {
	animation: anim-marqueeReverseSlide 10s linear;
}

@keyframes anim-marqueeReverseSlide {
	0% { transform: translateX(0%); }
	100% { transform: translateX(100%); }
}