[Sass]: Simple dot animation

And I found my old pet project when I was interested in Sass. Well, this looks not very organic or rhythmic, not Brownian motion.

Pug:

- for (var x = 0; x < 11; x++)
  div.b

Sass:

.b
  width: 10vmin
  height: 10vmin
  border-radius: 50%
  position: absolute
  top: 0
  left: 0
  animation-iteration-count: infinite 
  animation-direction: alternate
  animation-timing-function: linear
  animation-fill-mode: backwards
@for $i from 1 through 15
  @keyframes anm#{$i}
    0% 
      left: 10vmin
      top: 10vmin
      opacity: 0
    100%
      left: random(250)+vmin
      top: random(250)+vmin
      transform: scale(random(3))
  .b:nth-child(#{$i})
    animation-name: anm#{$i}
    animation-duration: random(20)+s
    animation-delay: $i/10 +s 
    background: linear-gradient(45deg, rgb(random(255), random(255), random(255)), rgb(random(255), random(255), random(255)))

codepen_ex

Blog

[Sass]: Simple dot animation

Anastasiia_Berest

Join Our Newsletter. No Spam, Only the good stuff.

Related