<button onclick="getPrimeNumbers()">Get me some primes!</button>

<button onclick="resetList()">Reset</button>

<br />
Animated with CSS
<div class="animations">
  <div class="transformAnimation"></div>
  <div class="marginAnimation"></div>
</div>

Animated with JS
<div class="animations">
  <div class="static" id="static"></div>
  </div>
</div>

Prime numbers:
<div class="primesContainer">
  <ul key={p} class="primes" id="primes">
  </ul>
</div>
.primesContainer {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}


.primes {
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  > li {
    margin: 5px 30px 5px 0px;
  }
}

.animations {
  background-color: "red";
  width: 300px;
  height: 180px;
  position: relative;
}
  .transformAnimation,
  .marginAnimation,
  .static {
    position: absolute;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin: 0;
  }
  .transformAnimation {
    top: 30px;
    background-color: #55f;
    animation: transformLeft 4s infinite linear;
  }
  .marginAnimation {
    top: 100px;
    background-color: #f55;
    animation: marginLeft 2s infinite linear;
  }
  .static {
    top: 30px;
    background-color: #555;
  }

@keyframes transformLeft {
  from {
    transform: translate(0px);
  }
  to {
    transform: translate(300px);
  }
}

@keyframes marginLeft {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 300px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
View Compiled
const isPrime = num => {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false
    }
  }
  return true
}

const getNext = (current = 0) => {
  while (!isPrime(current)) {
    current += 1
  }
  return current
}

appendToList = (content) => {
  // Create a <li> node
  let node = document.createElement("LI")
  // Append the text to <li>
  node.appendChild(document.createTextNode(content))
  document.getElementById("primes").appendChild(node);  
}

getPrimeNumbers = () => {
  let primes = [100000000]
  while (primes.length < 20) {
    const previous = primes[primes.length - 1]
    primes.push(getNext(previous + 1))
    appendToList(primes[primes.length - 1])
  }
}

resetList = () => {
  const list = document.getElementById("primes");
  while (list.firstChild) {
      list.removeChild(list.firstChild);
  }
}

let margin = 0
startAnimation = () => {
  margin = (margin + 2) % 300
  document.getElementById("static").style.marginLeft = `${margin}px`
  requestAnimationFrame(startAnimation)
}

requestAnimationFrame(startAnimation)

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.