@-webkit-keyframes shine {
 0% { opacity: 0.1; background-position: 50px top; }
 30% { opacity: 1; }
 50%, 100% { opacity: 0.2; background-position: -500px 0; }
}

@-webkit-keyframes bobbing {
 0% { -webkit-transform: rotate(0) translateY(0); }
 100% {	-webkit-transform: rotate(1deg) translateY(5px); }
}

@-webkit-keyframes spin {
 0% { -webkit-transform: rotate(0); }
 100% {	-webkit-transform: rotate(360deg);}
}

@-webkit-keyframes thingy {
 0% { -webkit-transform: translateX(0); width: 0; opacity: 0; }
 10% { width: 10%; opacity: 1; }
 30%, 100% { -webkit-transform: translateX(-250px);	width: 0; opacity: 0; }
}

@-webkit-keyframes shadow {
 0% { -webkit-transform: scale(1); }
 100% {	-webkit-transform: scale(1.01);	}
}

@keyframes movecar { from { left: -50%; } to { left: 160%; } }

.truck-container { background: #44dbae; margin: 20px 0; padding: 20px; }
.truck { width: 300px; margin: 0; position: absolute; height: 64px; bottom: 5px; left: 10px; z-index: 9999; }
.truck-animation { -webkit-animation: movecar 20s ease-in-out infinite alternate; }
/*.truck-animation { -webkit-animation: movecar 20s ease-in-out forwards; } */

.truck * { position: absolute;	}

.wheel,
.wheel:after,
.wheel:before { bottom: -42%; width: 12.8%; height: 46.38%; border-radius: 100%; background: #1e2327; }

.wheel { left: 21.5%; -webkit-animation: spin 0.4s infinite linear;	}
.wheel.front { left: 82%; }

.wheel:after,
.wheel:before {	content: ''; position: absolute; display: block; top: 20%; left: 20%; width: 60%; height: 60%; }

.wheel:before {	background: #aaa; }
.wheel:after { top: 40%; left: 40%; width: 20%;	height: 20%; }

.body {	width: 100%; position: absolute; -webkit-transform-origin: right center; -webkit-animation: bobbing 0.2s infinite ease-in-out forwards alternate; }

.frame { position: relative; }
.truck img { width: 100%; height: auto; top: 0; left: 0; margin: 0;	}

.shine { width: 67%; height: 37%; background: #222; left: 9%; top: 6%; border-radius: 56px 100px 20px 0;
 background: -webkit-gradient(linear, left top, right top, color-stop(76%, transparent), color-stop(78%, rgba(255,255,255,0.8)), color-stop(96%, rgba(255,255,255,0.8)), color-stop(98%, transparent));
 background: -webkit-linear-gradient(left, transparent 76%, rgba(255,255,255,0.8) 78%, rgba(255,255,255,0.8) 96%, transparent 98%);
 -webkit-transform: skew(33deg, 1deg);
 -webkit-background-size: cover;
 -webkit-animation: shine 3s infinite ease forwards;
 background-repeat: no-repeat;
}

.speed-thingy { position: absolute;	width: 20px; border-radius: 10px; height: 5%; background: #fff; top: -10%; left: 50%; -webkit-animation: thingy 3s infinite ease forwards; }

.speed-thingy.second { top: 50%; left: 30%; -webkit-animation-delay: 0.1s; }

.shadow { width: 90%; border-radius: 100%; height: 20px; bottom: -57%; left: 5%; background: rgba(0,0,0,0.1);
 -webkit-animation: shadow 0.2s infinite ease-in-out forwards alternate;
 -webkit-transform-origin: right center;
}

.not-animated {	-webkit-animation: none; }
