<div></div>

<form>
  <label>Iterations</label>
  <select id="iterations">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option selected>8</option>
  </select>
  
  <label>Keyframes</label>
  <select id="keyframes">
    <option value="0">Original</option>
    <option value="1">Alternate</option>
  </select>
  
  <p>For full support, please try a browser that supports the <span id="waapi-supported">Web Animations API</span>, <span id="composite-supported"><code>composite</code> property</span>, <span id="iteration-composite-supported"><code>iterationComposite</code> property</span>, and <span id="set-keyframes-supported"><code>setKeyframes()</code> function</span>, 
</form>

div {
  border: 1vmin solid hsl(var(--hue, 153), 90%, 54%);
  border-radius: 50%;
  width: 5vmin;
  height: 5vmin;
  transform: translateX(-5vmin);
  transform-origin: 0% 50%;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  overflow: hidden;
  background: #16161c;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}

form {
  position: absolute;
  padding: 1rem;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  color: #fafbff;
}
label {
  padding-right: .5rem;
  font-size: .875rem;
}
select:not(:last-of-type) {
  margin-right: 2rem;
}
form p {
  width: 100%;
  padding: 1rem;
  text-align: center;
  line-height: 1.44;
}
form p span {
  border-bottom: .2rem solid hsl(343, 100%, 56%);
}
.waapi-supported #waapi-supported,
.composite-supported #composite-supported,
.iteration-composite-supported #iteration-composite-supported,
.set-keyframes-supported #set-keyframes-supported {
  border-color: hsl(163, 100%, 56%);
}

const div = document.querySelector('div');
const count = 8;
const iterationKeyframes = [
  { transform: 'translateY(0vh)' },
  { transform: 'translateY(0vh)' },
  { transform: 'translateY(-20vh)' },
  { transform: 'translateY(-9vh)' },
  { transform: 'translateY(-9vh)' },
];

if (div.animate) {
  document.documentElement.classList.add('waapi-supported')
  var iterations = div.animate(iterationKeyframes, {
    duration: 1000,
    iterations: count,
    direction: 'normal',
    fill: 'both',
    easing: 'ease-in-out',
    composite: 'add', //take into account the transform applied in CSS
    iterationComposite: 'accumulate' //each iteration will build on the last
  });
  
  var horizontal = div.animate({
    transform: [
      'translateX(0vw)',
      'translateX(calc(100vw + 5vmin))'
    ]
  }, {
    duration: 1000,
    iterations: count,
    fill: 'both',
    easing: 'linear',
    composite: 'add' //take into account `transform` supplied in CSS and previous WAAPI animation
  });
  
  checkSupport(iterations, horizontal);
  
  iterations.onfinish = () => {
    iterations.reverse();
    horizontal.play();
  }
}

document.getElementById('iterations').addEventListener('change', e => {
  let value = parseFloat(e.currentTarget.value);
  iterations.effect.timing.iterations = value;
  horizontal.effect.timing.iterations = value;
});


const newBetterKeyframes = [
  { transform: 'translateY(0vh)' },
  { transform: 'translateY(0vh) scale(.5)' },
  { transform: 'translateY(10vh) scale(.5)' },
  { transform: 'translateY(-9vh) scale(.7)' },
  { transform: 'translateY(-9vh)' },
];
document.getElementById('keyframes').addEventListener('change', e => {
  let value = e.currentTarget.value;
  if (value == 1) {
    iterations.effect.setKeyframes(newBetterKeyframes);
  } else {
    iterations.effect.setKeyframes(iterationKeyframes);
  }
});



function checkSupport(anim1, anim2) {
  if (anim1 && anim1.effect && anim1.effect.composite === 'add') {
    document.documentElement.classList.add('composite-supported')
  }
  if (anim1 && anim1.effect && anim1.effect.iterationComposite === 'accumulate') {
    document.documentElement.classList.add('iteration-composite-supported')
  }
  if (anim1 && anim1.effect && typeof anim1.effect.setKeyframes === 'function') {
    document.documentElement.classList.add('set-keyframes-supported')
  }
}