CSS-Only Logo Slider

CSS.only.logo.slider.css

body {
	background: #FF5F6D;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #FFC371, #FF5F6D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

body:not(.ng-scope) :is(.logo-slider, #incspec) {
	flex-direction: row;
	align-items: center;
	overflow: hidden;
	position: relative;
	height: 100px;
	
	--animationspeed: 30s;
	--animationdelay: calc( var(--animationspeed) / 2 );
}

body:not(.ng-scope) .logo-slide {
	flex-shrink: 0;
	position: absolute;
	animation-name: slidelogo;
	animation-duration: var(--animationspeed);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

body:not(.ng-scope) .logo-slide.delay {
	transform: translateX(100%);
	animation-name: slidelogo;
	animation-delay: var(--animationdelay);
}

/** Optional: Uncomment this if you'd like the slider to pause on hover.
.logo-slider:hover .logo-slide {
	animation-play-state: paused;
}
**/

@keyframes slidelogo {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}