Simple SASS Marquee https://github.com/AlfredoRamos/simple-marquee

marquee.css

/**
 * Simple Marquee
 * https://github.com/AlfredoRamos/simple-marquee
 * @author Alfredo Ramos <alfredo.ramos@yandex.com>
 * @version 1.0.0
 * @copyright 2018 Alfredo Ramos
 * @license GPL-3.0+
 */
@-webkit-keyframes marquee {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	100% {
		-webkit-transform: translate(-100%, 0);
		transform: translate(-100%, 0);
	}
}
@keyframes marquee {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	100% {
		-webkit-transform: translate(-100%, 0);
		transform: translate(-100%, 0);
	}
}

.marquee {
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
}

.marquee > ul {
	list-style: none;
}

.marquee > ul > li {
	display: inline-block;
}

.marquee-content {
	display: inline-block;
	-webkit-animation-name: marquee;
	animation-name: marquee;
	-webkit-animation-duration: 15s;
	animation-duration: 15s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	padding-left: 100%;
}

.marquee-reverse .marquee-content {
	animation-direction: reverse;
}

.marquee:hover .marquee-content {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.marquee-speed-sx2 .marquee-content {
	-webkit-animation-duration: 30s;
	animation-duration: 30s;
}

.marquee-speed-fx2 .marquee-content {
	-webkit-animation-duration: 7.5s;
	animation-duration: 7.5s;
}

.marquee-speed-sx3 .marquee-content {
	-webkit-animation-duration: 45s;
	animation-duration: 45s;
}

.marquee-speed-fx3 .marquee-content {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
}

.marquee-speed-sx4 .marquee-content {
	-webkit-animation-duration: 60s;
	animation-duration: 60s;
}

.marquee-speed-fx4 .marquee-content {
	-webkit-animation-duration: 3.75s;
	animation-duration: 3.75s;
}

.marquee-speed-sx5 .marquee-content {
	-webkit-animation-duration: 75s;
	animation-duration: 75s;
}

.marquee-speed-fx5 .marquee-content {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
}

marquee.min.css

@-webkit-keyframes marquee{0%{-webkit-transform:translate(0, 0);transform:translate(0, 0)}100%{-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0)}}@keyframes marquee{0%{-webkit-transform:translate(0, 0);transform:translate(0, 0)}100%{-webkit-transform:translate(-100%, 0);transform:translate(-100%, 0)}}.marquee{overflow:hidden;white-space:nowrap;box-sizing:border-box}.marquee>ul{list-style:none}.marquee>ul>li{display:inline-block}.marquee-content{display:inline-block;-webkit-animation-name:marquee;animation-name:marquee;-webkit-animation-duration:15s;animation-duration:15s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;padding-left:100%}.marquee-reverse .marquee-content{animation-direction:reverse}.marquee:hover .marquee-content{-webkit-animation-play-state:paused;animation-play-state:paused}.marquee-speed-sx2 .marquee-content{-webkit-animation-duration:30s;animation-duration:30s}.marquee-speed-fx2 .marquee-content{-webkit-animation-duration:7.5s;animation-duration:7.5s}.marquee-speed-sx3 .marquee-content{-webkit-animation-duration:45s;animation-duration:45s}.marquee-speed-fx3 .marquee-content{-webkit-animation-duration:5s;animation-duration:5s}.marquee-speed-sx4 .marquee-content{-webkit-animation-duration:60s;animation-duration:60s}.marquee-speed-fx4 .marquee-content{-webkit-animation-duration:3.75s;animation-duration:3.75s}.marquee-speed-sx5 .marquee-content{-webkit-animation-duration:75s;animation-duration:75s}.marquee-speed-fx5 .marquee-content{-webkit-animation-duration:3s;animation-duration:3s}