<div id="star"></div>
<form>
  <button type="button">Add Random Opacity Animation</button>
</form>

[[[https://codepen.io/danwilson/pen/69c1a7ec378459d46b212e1f8a162d87]]]
#star {
  width: var(--size);
  height: var(--size);
  background: hsl(var(--hue,343), 95%,54%);
  margin: 5vmin;
  
  --size: 40vmin;

  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}







/* Styles for explainer pieces: notes, body, button*/
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: hsl(223, 80%, 12%);
  color: #fafdff;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  perspective: 100vmax;
}
*, *::before, *::after {
  box-sizing: border-box;
}


aside {
  width: 0;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  background: hsla(183, 90%, 0%, .5);
  padding: 1rem .5rem;
  font-size: 75%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  
  display: none;
}
@media (min-width: 600px) {
  :root {
    --aside-size: 320px;
  }
  aside {
    display: block;
    width: var(--aside-size);
  }
  aside > div {
    display: flex;
  }
  aside label {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1.5em;
    margin-bottom: 5px;
    opacity: .5;
    transition: opacity 150ms linear;
  }
  aside input {
    margin-right: 8px;
  }
  aside input:checked + label {
    opacity: 1;
  }
  aside p:nth-of-type(2) {
    text-align: right;
  }
  aside p:nth-of-type(3) {
    grid-column: 1 / 3;
    height: 66.667%;
    background: linear-gradient(to right, hsl(var(--hue, 4), 94%, 60%) 5px, transparent 5px);
  }
  body,
  form {
    padding-right: var(--aside-size);
  }
  button {
    width: var(--aside-size);
  }
}

form {
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  justify-content: center;
}
button {
  display: none;
  margin-bottom: 1rem;
  height: 50px;
  appearance: none;
  border: 4px solid hsl(153, 90%, 60%);
  border-radius: 0;
  background: hsla(153, 90%, 10%, .5);
  color: hsl(153, 90%, 60%);
  font-size: 1em;
}
button:hover {
  transform: scale(1.025);
}
button:active {
  transform: scale(.975);
}
button:focus {
  outline: 2px dotted hsl(183, 100%, 50%);
}
.supported button {
  display: block;
}

body > p {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  text-align: center;
  line-height: 1.35;
}
.supported body > p {
  display: none;
}

#star {
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(223, 80%, 12%);
}
const star = document.getElementById('star');
const button = document.querySelector('button');
let animations = [];

checkSupport();

function addAnimation() {
  let keyframes = getKeyframes();
  let duration = getDuration();
  let easing = getEasing();
  
  let currentAnimation = star.animate(keyframes, {
    duration: duration,
    direction: 'alternate',
    iterations: Infinity,
    easing: easing,
    composite: animations.length ? 'add' : 'replace'
  });
  
  animations.push({
    animation: currentAnimation,
    notes: createNotes(keyframes, duration, easing, 'opacity')
  })
  
  star.textContent = (animations.length);
  
  return currentAnimation;
}







/* Get a random duration, easing, and transformation function */
function getDuration() {
  return (1000 + (Math.random() * 5000));
}

function getEasing() {
  let key = Math.random();
  if (key < .5) {
    return 'ease-in-out';
  } else {
    return 'cubic-bezier(.3,0,.7,1)';
  }
}

function getKeyframes() {
  var to = .01 + Math.random() * .09;

  return {
    opacity: [0, to]
  };
}

setInterval(() => {
  console.log(Date.now(), getComputedStyle(star).opacity);
}, 5000);

External CSS

  1. https://codepen.io/danwilson/pen/69c1a7ec378459d46b212e1f8a162d87

External JavaScript

  1. https://codepen.io/danwilson/pen/69c1a7ec378459d46b212e1f8a162d87