body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.bg-sprite {
	width: 100%;
	height: 0;
	animation-timing-function: step-start;
	animation-iteration-count: infinite;
	background-repeat: repeat-x;
}

@mixin bg-sprite($name, $sprite-height, $sprite-width, $sprite-cell_count, $animation_duration, $sprite-url) {
	.bg-sprite--#{$name} {
		padding-bottom: percentage($sprite-height / ($sprite-width/$sprite-cell_count));
		background-image: url( #{$sprite-url} );
		background-size: $sprite-cell_count * 100%;
		transition: transform $animation_duration;
		background-position: 0% 50%;
		&:hover {
			animation-name: animatedSprite-#{$name};
			animation-duration: $animation_duration;
		}
	}
	@keyframes animatedSprite-#{$name} {
		@for $i from 0 through $sprite-cell_count {
			#{$i * (100% / $sprite-cell_count)} {
				background-position: (-100% * $i) 50%;
			}
		}
	}
}

$sprite-height: 100;
$sprite-width: 1200;
$sprite-cell_count: 6;
$animation_duration: 450ms;
$sprite-url: 'https://jeffszuc.com/assets/posts/avatar-tawa.svg';

@include bg-sprite('tawa', $sprite-height, $sprite-width, $sprite-cell_count, $animation_duration, $sprite-url);