On gists

Simple odometer

CSS CSS trick

example.html Raw #

<!-- https://jsbin.com/pazamoremo/3/edit?html,css,output -->

	<div>
		<span>0 1 2 3 4 5 6 7 8 9 10 0</span>
	</div>

example.css Raw #

@keyframes slide {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-11em);
  }
}


body {
	font-size: 30px;
}



div {
	width: 1em;
	height: 1em;
	border: 1px solid red;
	line-height: 1em;
	text-align: center;
	margin: 8rem;
	overflow: hidden;
}

span {
	background: gold;
	transform: translateY(0);
	display: block;
	
	animation: slide 11s linear  infinite;
}