JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="animated-scene">
  <div class="sun"></div>
  <div class="boy"></div>
  <div class="pizza"></div>
</div>
<label>Speed</label>
<input type="range" min="0" max="5" step="0.01" value="1" />

CSS

html, body{
  margin:0px;
  font-size:12px;
  font-family:helvetica;
}
.animated-scene{
    width:100px;
    height:100px;
    position:relative;
    background-color: #1d1d1d;
    overflow:hidden;
}

@keyframes sprite0 {
  from { background-position: 0px; }
  to { background-position: -500px; }
}

.animated-scene .sun{
    width:100px;
    height:100px;
    position:absolute;
    background-image:url("https://eastcoastenzos.com/assets/animation/sun.png?2");
    background-size: cover;
    right:100px;
    bottom:90px;
    display:none;
}

.animated-scene .boy{
  width:210px;
  height:260px;
  position:absolute;
  background: url("https://eastcoastenzos.com/assets/animation/deliveryboy.png?222");
  animation: sprite1 1s steps(9) infinite;
  transform:scale(0.25);
  bottom:0px;
  left:100px;
}

@keyframes sprite1 {
  from { background-position: 0px; }
  to { background-position: -1890px; }
}

.animated-scene .pizza{
  width:210px;
  height:210px;
  position:absolute;
  background: url("https://eastcoastenzos.com/assets/animation/pizza.png?22");
  animation: sprite2 2.5s infinite linear;
  transform:scale(0.5);
  bottom:-138px;
  background-size:contain;
  left:100px;
}

@keyframes sprite2 {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

JavaScript

var scene = document.querySelector('.animated-scene');
var pizza = document.querySelector('.pizza');
var boy = document.querySelector('.boy');

var range = document.querySelector('input[type="range"]');

var speed = 1;

range.addEventListener('input',function(){

	speed = this.value;
  
  console.log(speed);

	boy.style.animationDuration = parseFloat(1/speed) + 's';
	pizza.style.animationDuration = parseFloat(2.5/speed) + 's';
	scene.style.animationDuration = parseFloat(5/speed) + 's';

});