mart cube
mart cube

Reputation: 665

Keyframes animation with svg

I'm trying to make animation CSS where I have an SVG file of "code" and "computer screen".

What I try to achieve is when my code translates at the end I don't want to have empty screen on my infinite loop. I want to have code moving all the time. I tried to do this by dividing the code and make one of the code loop faster ( that's why you can see i have classes of code1, code2 and code3 ). Unfortunately that failed for me too.

Does anybody can give me suggestion or idea how to do this ?

here you can see an example on JSFiddle

.animation {
	height: 124px;
	width: 180px;
	overflow: hidden;
}

@keyframes scrolling1 {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-370px);
	}
}

.code1,
.code2,
.code3 {
	animation: scrolling1 4s linear infinite;
}


/* collors */
.st0 {
	opacity: 0.17;
}
.st1 {
	fill: #56aeec;
}
.st2 {
	fill: #2c65cc;
}
.st3 {
	fill: #2984d6;
}
.st4 {
	fill: #ccccff;
}
.st5 {
	fill: #8dfcff;
}
.st6 {
	fill: #38e0eb;
}
.st7 {
	fill: #e0fa09;
}
.st8 {
	fill: #ff49a5;
}
.st9 {
	fill: #ff3333;
}
.st10 {
	fill: #00ff66;
}
.st11 {
	fill: #ff6666;
}
.st12 {
	fill: #ff66cc;
}
<div class="animation">
			<svg width="180" height="375" viewBox="0 0 180 375">
				<g class="code1">
					<path class="st4" d="M107.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C108.8,313.1,108.3,313.6,107.7,313.6z"/>
					<path class="st5" d="M161,319.6H67c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C162.1,319.1,161.6,319.6,161,319.6z"/>
					<path class="st4" d="M51.7,319.6H36.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h14.8c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,319.1,52.3,319.6,51.7,319.6z"/>
					<path class="st4" d="M134.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C135.8,313.1,135.3,313.6,134.7,313.6z"/>
					<path class="st5" d="M120.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C121.8,313.1,121.3,313.6,120.7,313.6z"/>
					<path class="st5" d="M147.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C148.8,313.1,148.3,313.6,147.7,313.6z"/>
					<path class="st4" d="M160.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C161.8,313.1,161.3,313.6,160.7,313.6z"/>
					<path class="st6" d="M51.7,313.6h-35c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,313.1,52.3,313.6,51.7,313.6z"/>
					<path class="st5" d="M95.6,313.6h-35c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C96.7,313.1,96.2,313.6,95.6,313.6z"/>
					<path class="st4" d="M28.6,319.6h-12c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h11.9c0.6,0,1.2,0.5,1.2,1.2l0,0C29.7,319.1,29.2,319.6,28.6,319.6z"/>
					<path class="st6" d="M25.2,330.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,329.8,26,330.5,25.2,330.5z"/>
					<path class="st6" d="M25.2,337.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,336.8,26,337.5,25.2,337.5z"/>
					<path class="st6" d="M25.2,344.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,343.8,26,344.5,25.2,344.5z"/>
					<path class="st7" d="M35.2,351.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,350.8,36,351.5,35.2,351.5z"/>
					<path class="st8" d="M35.2,358.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,357.8,36,358.5,35.2,358.5z"/>
					<path class="st9" d="M35.2,365.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,364.8,36,365.5,35.2,365.5z"/>
					<path class="st9" d="M60.2,330.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,329.8,61,330.5,60.2,330.5z"/>
					<path class="st8" d="M60.2,337.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,336.8,61,337.5,60.2,337.5z"/>
					<path class="st7" d="M60.2,344.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,343.8,61,344.5,60.2,344.5z"/>
					<path class="st6" d="M60.2,351.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,350.8,61,351.5,60.2,351.5z"/>
					<path class="st6" d="M60.2,358.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,357.8,61,358.5,60.2,358.5z"/>
					<path class="st6" d="M60.2,365.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,364.8,61,365.5,60.2,365.5z"/>
					<path class="st6" d="M92.2,330.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,329.8,93,330.5,92.2,330.5z"/>
					<path class="st6" d="M92.2,337.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,336.8,93,337.5,92.2,337.5z"/>
					<path class="st6" d="M92.2,344.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,343.8,93,344.5,92.2,344.5z"/>
					<path class="st7" d="M82.2,351.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,350.8,83,351.5,82.2,351.5z"/>
					<path class="st8" d="M82.2,358.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,357.8,83,358.5,82.2,358.5z"/>
					<path class="st9" d="M82.2,365.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,364.8,83,365.5,82.2,365.5z"/>
					<path class="st9" d="M117.2,330.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,329.8,118,330.5,117.2,330.5z"/>
					<path class="st8" d="M117.2,337.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,336.8,118,337.5,117.2,337.5z"/>
					<path class="st7" d="M117.2,344.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,343.8,118,344.5,117.2,344.5z"/>
					<path class="st6" d="M117.2,351.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,350.8,118,351.5,117.2,351.5z"/>
					<path class="st6" d="M117.2,358.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,357.8,118,358.5,117.2,358.5z"/>
					<path class="st6" d="M117.2,365.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,364.8,118,365.5,117.2,365.5z"/>
					<path class="st10" d="M156,329h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,328.7,156.4,329,156,329z"/>
					<path class="st8" d="M156,334.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,334.6,156.4,334.9,156,334.9z"/>
					<path class="st10" d="M156,340.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,340.6,156.4,340.9,156,340.9z"/>
					<path class="st7" d="M156,346.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,346.5,156.4,346.8,156,346.8z"/>
					<path class="st10" d="M156,352.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,352.5,156.4,352.8,156,352.8z"/>
					<path class="st9" d="M156,358.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,358.4,156.4,358.7,156,358.7z"/>
					<path class="st10" d="M156,364.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,364.4,156.4,364.7,156,364.7z"/>
					<path class="st9" d="M35.2,371.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,370.8,36,371.5,35.2,371.5z"/>
					<path class="st6" d="M60.2,371.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,370.8,61,371.5,60.2,371.5z"/>
					<path class="st9" d="M82.2,371.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,370.8,83,371.5,82.2,371.5z"/>
					<path class="st6" d="M117.2,371.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,370.8,118,371.5,117.2,371.5z"/>
					<path class="st10" d="M156,370.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,370.4,156.4,370.7,156,370.7z"/>
				</g>
				<g class="code2">
					<path class="st5" d="M126,224.6H32c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C127.1,224.1,126.6,224.6,126,224.6z"/>
					<path class="st6" d="M75.8,217.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,216.8,76.7,217.5,75.8,217.5z"/>
					<path class="st6" d="M21.7,224.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,224.1,22.3,224.6,21.7,224.6z"/>
					<path class="st7" d="M64.6,231H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,230.7,65,231,64.6,231z"/>
					<path class="st7" d="M64.6,236.9H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,236.6,65,236.9,64.6,236.9z"/>
					<path class="st7" d="M64.6,242.8H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,242.4,65,242.8,64.6,242.8z"/>
					<path class="st10" d="M64.6,248.6H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,248.3,65,248.6,64.6,248.6z"/>
					<path class="st7" d="M23.6,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C24.3,254.2,23.9,254.5,23.6,254.5z"/>
					<path class="st7" d="M36.4,254.5H29c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C37.2,254.2,36.8,254.5,36.4,254.5z"/>
					<path class="st7" d="M49.3,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C50.1,254.2,49.7,254.5,49.3,254.5z"/>
					<path class="st7" d="M62.2,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C62.9,254.2,62.6,254.5,62.2,254.5z"/>
					<path class="st7" d="M75.1,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C75.8,254.2,75.5,254.5,75.1,254.5z"/>
					<path class="st7" d="M88,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H88c0.4,0,0.7,0.3,0.7,0.7l0,0C88.7,254.2,88.4,254.5,88,254.5z"/>
					<path class="st7" d="M64.6,260.4H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,260.1,65,260.4,64.6,260.4z"/>
					<path class="st11" d="M164.1,235.8h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,235.4,164.7,235.8,164.1,235.8z"/>
					<path class="st11" d="M130.7,242.7h-26c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1l0,0C131.7,242.2,131.3,242.7,130.7,242.7z"/>
					<path class="st11" d="M164.1,242.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,242.2,164.7,242.7,164.1,242.7z"/>
					<path class="st7" d="M164.1,260.9h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,260.5,164.7,260.9,164.1,260.9z"/>
					<path class="st10" d="M164.1,266.2h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,265.7,164.7,266.2,164.1,266.2z"/>
					<path class="st5" d="M30.9,289.1H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,288.6,31.4,289.1,30.9,289.1z"/>
					<path class="st5" d="M30.9,285H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,284.5,31.4,285,30.9,285z"/>
					<path class="st5" d="M30.9,280.8H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,280.4,31.4,280.8,30.9,280.8z"/>
					<path class="st5" d="M30.9,276.7H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,276.3,31.4,276.7,30.9,276.7z"/>
					<path class="st10" d="M53.3,276.7H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,276.3,53.9,276.7,53.3,276.7z"/>
					<path class="st10" d="M43.3,285H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,284.5,43.9,285,43.3,285z"/>
					<path class="st10" d="M53.3,280.8H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,280.4,53.9,280.8,53.3,280.8z"/>
					<path class="st10" d="M43.3,289.1H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,288.6,43.9,289.1,43.3,289.1z"/>
					<path class="st10" d="M62.3,285H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,284.5,62.9,285,62.3,285z"/>
					<path class="st10" d="M62.3,289.1H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,288.6,62.9,289.1,62.3,289.1z"/>
					<path class="st10" d="M71.3,276.7H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,276.3,71.9,276.7,71.3,276.7z"/>
					<path class="st10" d="M71.3,280.8H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,280.4,71.9,280.8,71.3,280.8z"/>
					<path class="st11" d="M130.7,247.7h-26c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1l0,0C131.7,247.2,131.3,247.7,130.7,247.7z"/>
					<path class="st11" d="M164.1,247.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,247.2,164.7,247.7,164.1,247.7z"/>
					<path class="st8" d="M134,276h-30c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h30c0.4,0,0.7,0.3,0.7,0.7l0,0C134.7,275.7,134.4,276,134,276z"/>
					<path class="st7" d="M163.6,280.9h-43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h43.2c0.4,0,0.7,0.3,0.7,0.7l0,0C164.3,280.6,164,280.9,163.6,280.9z"/>
					<path class="st8" d="M143.2,284.8h-39c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h39c0.4,0,0.7,0.3,0.7,0.7l0,0C143.9,284.4,143.6,284.8,143.2,284.8z"/>
					<path class="st8" d="M162.7,288.6h-35.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h35.2c0.4,0,0.7,0.3,0.7,0.7l0,0C163.4,288.3,163.1,288.6,162.7,288.6z"/>
					<path class="st8" d="M164,271.4h-59.8c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H164c0.4,0,0.7,0.3,0.7,0.7l0,0C164.7,271.1,164.4,271.4,164,271.4z"/>
				</g>
				<g class="code3">
					<path class="st4" d="M21.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,137.1,22.3,137.6,21.7,137.6z"/>
					<path class="st5" d="M160,144.6H66c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C161.1,144.1,160.6,144.6,160,144.6z"/>
					<path class="st6" d="M75.8,151.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,150.8,76.7,151.5,75.8,151.5z"/>
					<path class="st6" d="M48.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,144.1,49.3,144.6,48.7,144.6z"/>
					<path class="st4" d="M48.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,137.1,49.3,137.6,48.7,137.6z"/>
					<path class="st5" d="M34.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,137.1,35.3,137.6,34.7,137.6z"/>
					<path class="st5" d="M61.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C62.8,137.1,62.3,137.6,61.7,137.6z"/>
					<path class="st4" d="M74.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C75.8,137.1,75.3,137.6,74.7,137.6z"/>
					<path class="st6" d="M111.6,137.6h-31c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.9c0.6,0,1.2,0.5,1.2,1.2l0,0C112.7,137.1,112.2,137.6,111.6,137.6z"/>
					<path class="st5" d="M159.6,137.6h-34.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,137.1,160.2,137.6,159.6,137.6z"/>
					<path class="st6" d="M34.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,144.1,35.3,144.6,34.7,144.6z"/>
					<path class="st8" d="M75.8,157.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,156.8,76.7,157.5,75.8,157.5z"/>
					<path class="st6" d="M34.2,164.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C35.7,163.8,35,164.5,34.2,164.5z"/>
					<path class="st6" d="M34.2,171.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C35.7,170.8,35,171.5,34.2,171.5z"/>
					<path class="st6" d="M34.2,178.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C35.7,177.8,35,178.5,34.2,178.5z"/>
					<path class="st6" d="M34.2,185.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C35.7,184.8,35,185.5,34.2,185.5z"/>
					<path class="st6" d="M34.2,192.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C35.7,191.8,35,192.5,34.2,192.5z"/>
					<path class="st5" d="M159.6,163.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,163.3,160.2,163.9,159.6,163.9z"/>
					<path class="st12" d="M59.6,170.9H51c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,170.3,60.2,170.9,59.6,170.9z"/>
					<path class="st12" d="M73.6,170.9H65c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,170.3,74.2,170.9,73.6,170.9z"/>
					<path class="st5" d="M159.6,177.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,177.3,160.2,177.9,159.6,177.9z"/>
					<path class="st11" d="M59.6,184.9H51c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,184.3,60.2,184.9,59.6,184.9z"/>
					<path class="st11" d="M73.6,184.9H65c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,184.3,74.2,184.9,73.6,184.9z"/>
					<path class="st5" d="M159.6,191.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,191.3,160.2,191.9,159.6,191.9z"/>
					<path class="st7" d="M59.6,198.9H51c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,198.3,60.2,198.9,59.6,198.9z"/>
					<path class="st7" d="M73.6,198.9H65c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,198.3,74.2,198.9,73.6,198.9z"/>
					<path class="st9" d="M34.2,199.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C35.7,198.8,35,199.5,34.2,199.5z"/>
					<path class="st11" d="M110.6,184.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.6c0.6,0,1.2,0.5,1.2,1.2l0,0C111.7,184.3,111.2,184.9,110.6,184.9z"/>
					<path class="st7" d="M87.6,198.9H79c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C88.7,198.3,88.2,198.9,87.6,198.9z"/>
					<path class="st7" d="M101.6,198.9H93c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C102.7,198.3,102.2,198.9,101.6,198.9z"/>
					<path class="st12" d="M117.6,170.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h37.6c0.6,0,1.2,0.5,1.2,1.2l0,0C118.7,170.3,118.2,170.9,117.6,170.9z"/>
					<path class="st10" d="M159.1,170.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,170.3,159.7,170.9,159.1,170.9z"/>
					<circle class="st9" cx="17.6" cy="128.7" r="1.9"/>
					<circle class="st7" cx="25.2" cy="128.7" r="1.9"/>
					<circle class="st10" cx="32.8" cy="128.7" r="1.9"/>
					<path class="st10" d="M159.1,184.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,184.3,159.7,184.9,159.1,184.9z"/>
					<path class="st10" d="M159.1,198.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,198.3,159.7,198.9,159.1,198.9z"/>
					<path class="st7" d="M75,130H43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H75c0.4,0,0.7,0.3,0.7,0.7l0,0C75.7,129.7,75.4,130,75,130z"/>
					<path class="st7" d="M112,130H80.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H112c0.4,0,0.7,0.3,0.7,0.7l0,0C112.7,129.7,112.4,130,112,130z"/>
				</g>			
				<g class="screen">
					<g class="st0">
						<polygon class="st1" points="172.2,71.1 172.2,53.5 118.6,107.1 136.2,107.1"/>
						<polygon class="st1" points="79.9,107.1 172.2,14.8 172.2,8.7 131.2,8.7 32.8,107.1"/>
						<polygon class="st1" points="6,51.5 6,91.3 88.6,8.7 48.8,8.7"/>
					</g>
					<path class="st2" d="M175.2,123.9H5c-2.8,0-5-2.3-5-5v-6.2c0-2.8,2.3-5,5-5h170.1c2.8,0,5,2.3,5,5v6.2C180.2,121.6,178,123.9,175.2,123.9z"/>
					<path class="st3" d="M175.2,0H5C2.3,0,0,2.3,0,5v105.2h180.2V5C180.2,2.3,178,0,175.2,0z M172.2,107.1H6V8.7h166.2V107.1z"/>
				</g>
				
			</svg>

Upvotes: 1

Views: 144

Answers (2)

MSC
MSC

Reputation: 3386

Keep the HTML / SVG the same but offset the animation start times so that the topmost image (.code1) goes back to the bottom position:

<style>
    .animation {
        height: 124px;
        width: 180px;
        overflow: hidden;
    }

    @keyframes scrolling1 {
        0% {
        }
        70% {
            transform: translateY(-410px);
        }
        100% {
            transform: translateY(-410px);
        }
    }

    @keyframes scrolling2 {
        0% {
        }
        70% {
            transform: translateY(-324px);
        }
        100% {
            transform: translateY(-324px);
        }
    }

    @keyframes scrolling3 {
        0% {
        }
        70% {
            transform: translateY(-226px);
        }
        100% {
            transform: translateY(-226px);
        }
    }

    .code1 {
        animation: scrolling1 4s linear infinite;
        animation-delay: 0s;
        transform: translateY(-190px);
    }

    .code2 {
        animation: scrolling2 4s linear infinite;
        animation-delay: 1.3333s;
        transform: translateY(-104px);
    }

    .code3 {
        animation: scrolling3 4s linear infinite;
        animation-delay: 2.6666s;
        transform: translateY(-6px);
    }

Upvotes: 2

Sam
Sam

Reputation: 176

To achieve the effect you want, I would suggest breaking the moving content (the inner svg) up into parts.

If it is broken up into parts, they can each slide up across the screen one after another. Once each part is off the screen it can return to it's original position, beneath the bottom of the visible area and ready to slide across the screen again.

I have made this as an example of how the effect of the content scrolling endlessly can be achieved: https://codepen.io/samcole/pen/ePLErz

HTML:

<div class="outer">
  <div class="inner inner--1">
  </div>
  <div class="inner inner--2">
  </div>
  <div class="inner inner--3">
  </div>
</div>

CSS:

.outer {
  width: 200px;
  height: 200px;
  background: black;
  overflow: hidden;
  position: relative;
}

.inner {
  width: 200px;
  height: 200px;
  position: absolute;
  animation: scroll;
  top: 200px;
  left: 0;
  animation: scroll 6s linear infinite;
}

.inner--1 {
  background: red;
}

.inner--2 {
  background: green;
  animation-delay: 2s;
}

.inner--3 {
  background: blue;
  animation-delay: 4s;
}

@keyframes scroll {
  0% {
   top: 200px; 
  }
  100% {
    top: -400px;
  }
}

Upvotes: 3

Related Questions