<div class="bg-sprite bg-sprite--tawa"></div>
<p>Hover over image to play</p>
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);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.