css animation counter combination lock

by ian_smithz

HTML

<div class="counter">
			<span class="digit-9"></span>
			<span class="digit-3"></span>
			<span class="digit-7"></span>
			<span class="digit-5"></span>
		</div>
    
    
    
    <img src="https://www.daymedia.co.uk/tutorials/css3-counter/counter-sprite.png">

CSS

.counter {
				float:left;
				padding:6px;
				border:solid 1px #487431;
				border-radius:5px;
				background:#527F40;
				background:linear-gradient(#8BC04C,#527F40);
        background:-moz-linear-gradient(#8BC04C,#527F40);
				background:-webkit-linear-gradient(#8BC04C,#527F40);
				background:-ms-linear-gradient(#8BC04C,#527F40);
				box-shadow:0 2px 4px rgba(0,0,0,0.4);
			}
			.counter span {
			    float:left;
				width:22px;
				height:30px;
				margin:0;
				padding:0;
			    text-indent:-9999px;
				font-size:0.0001em;
			    background-image:url(https://www.daymedia.co.uk/tutorials/css3-counter/counter-sprite.png);
			}

			/* Set all the background positions, and hook up all the animations */
			.counter .digit-0 {
			    background-position:0 -300px;
			    animation-name: digitSpin0;
			    animation-duration: 3s;
			    animation-iteration-count: 1;
			
				-webkit-animation-name: digitSpin0;
			    -webkit-animation-duration: 3s;
			    -webkit-animation-iteration-count: 1;
			
				-moz-animation-name: digitSpin0;
			    -moz-animation-duration: 3s;
			    -moz-animation-iteration-count: 1;
			}
			.counter .digit-1 {
			    background-position:0 -30px;
			    animation-name: digitSpin1;
			    animation-duration: 3s;
			    animation-iteration-count: 1;
			
				-webkit-animation-name: digitSpin1;
			    -webkit-animation-duration: 3s;
			    -webkit-animation-iteration-count: 1;
			
				-moz-animation-name: digitSpin0;
			    -moz-animation-duration: 3s;
			    -moz-animation-iteration-count: 1;
			}
			.counter .digit-2 {
			    background-position:0 -60px;
				animation-name: digitSpin2;
			    animation-duration: 3s;
			    animation-iteration-count: 1;
			
			    -webkit-animation-name: digitSpin2;
			    -webkit-animation-duration: 3s;
			    -webkit-animation-iteration-count: 1;
			
				-moz-animation-name: digitSpin2;
			    -moz-animation-duration: 3s;
			    -moz-animation-iteration-count: 1;
			}
			.counter .digit-3 {
			   ...