Codepen cheezy animation chalenge II

codepen-cheezy-animation-chalenge-ii.markdown

Codepen cheezy animation chalenge II

Created for the October 2020 CodePen Challenge

A Pen by Zarko Rvovic on CodePen.

License.

index.pug

.ring
  - for (var x = 1; x < 350; x++)
    .particle

style.scss

$particles: 350;
$ring-size: 50px;

body {
  background: black;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.ring {
  position: relative;
  width: 0px;
  height: 0px;
  background: red;
  transition: all 0.2s linear;
  transform-style: preserve-3d;

  .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    opacity: 0;
  }
}

// @keyframes ringRotate {
//   0% {
//     transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg);
//   }

//   100% {
//     transform: rotateZ(-360deg) rotateY(-360deg) rotateX(-360deg);
//   }
// }

@for $i from 1 through $particles {
  $z: (random(90) * 4deg); //
  $y: (random(90) * 4deg); //

  .particle:nth-child(#{$i}) {
    border-radius: 100%;
    transform-style: preserve-3d;
    animation: birth#{$i} 8s infinite;
    animation-delay: ($i * 0.01s);
    background: #82cffd;
  }

  @keyframes birth#{$i} {
    10% {
      opacity: 1;
    }
    12% {
      transform: rotateZ($y) rotateX($z) translate3d(150px, 0, 0);
    }
    40% {
      transform: rotateZ($y) rotateX($z) translate3d(150px, 0, 0)
        translateX(($ring-size * 3));
      opacity: 1;
    }
    60% {
      transform: rotateZ($y) rotateX($z) translate3d(40px, 0, 0)
        translateX(($ring-size / 3));
    }
  }
}