JSFiddle - React, Tailwind, and code Playground

by monodyle

HTML

<span id="radio-group">
    <input id="use-margin" type="radio" name="transition-method" value="margin" checked="true">Use margin</input>
    <input id="use-transform" type="radio" name="transition-method" value="transform">Use transform</input>
  </span>

  <input id ="start-stop" type="button" name="start-stop" value="Start" />

    <div id="container">
      <div class="moving-box" id="moving-box1" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box2" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box3" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box4" id="moving-box-transform"></div>

      <div class="moving-box" id="moving-box1" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box2" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box3" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box4" id="moving-box-transform"></div>

      <div class="moving-box" id="moving-box1" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box2" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box3" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box4" id="moving-box-transform"></div>

      <div class="moving-box" id="moving-box1" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box2" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box3" id="moving-box-transform"></div>
      <div class="moving-box" id="moving-box4" id="moving-box-transform"></div>

    </div>

CSS

.moving-box {
  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  height: 5px;
  width: 5px;
  margin: 2%;
  padding: 2%;
  box-shadow: 2px 6px 10px 10px pink;
}

.use-transform.started > .moving-box {
  animation-name: use-transform;
}

.use-margin.started > .moving-box  {
  animation-name: use-margin;
}

#moving-box1 {
  animation-duration: 3s;
  background-image:
    linear-gradient(
      teal,
      silver
    );
}

#moving-box2 {
  border-radius: 100px;
  animation-duration: 2s;
  background-image:
    radial-gradient(
      red,
      seagreen
    );
}

#moving-box3 {
  animation-duration: 1s;
  background-image:
    linear-gradient(
      orange,
      blue
    );
}

#moving-box4 {
  background-color: pink;
  animation-duration: 0.5s;
  background-image:
    radial-gradient(
      green,
      indigo
    );
}

@keyframes use-transform {
  from {
    transform: translate(90vw);
  }
  
  to {
    transform: translate(0);
  }
}

@keyframes use-margin {
  from {
    margin-left: 90vw;
  }
  
  to {
    margin-left: 0;
  }
}

JavaScript

var radioGroup = document.getElementById("radio-group");
var useMargin = document.getElementById("use-margin");
var useTransform = document.getElementById("use-transform");
var container = document.getElementById("container");
var startStopButton = document.getElementById("start-stop");

radioGroup.addEventListener("click", updateTransitionMethod, false);
startStopButton.addEventListener("click", startStop, false);

updateTransitionMethod();

function updateTransitionMethod() {
  if (useMargin.checked) {
    container.classList.remove("use-transform");
    container.classList.add("use-margin");
  }

  else if (useTransform.checked) {
    container.classList.add("use-transform");
    container.classList.remove("use-margin");
  }

}

var started = false;

function startStop() {
  started = !started;
  if (started) {
    container.classList.add("started");
    startStopButton.value = "Stop";
  }
  else {
   container.classList.remove("started");
   startStopButton.value = "Start";
  }
}