.snow-container

  position: absolute

  height: 500px

  width: 100%

  max-width: 100%

  top: 0

  overflow: hidden

  z-index: 2

  pointer-events: none

  background-color: black

​

.snow

  $foreground-speed: 15s

  $middleground-speed: 20s

  $background-speed: 25s

  display: block

  position: absolute

  z-index: 2

  top: 0

  right: 0

  bottom: 0

  left: 0

  pointer-events: none

  transform: translate3d(0,-100%,0)

  animation: snow linear infinite

  &.foreground

    background-image: url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png')

    animation-duration: $foreground-speed

    &.layered

      animation-delay: $foreground-speed/2

  &.middleground

    background-image: image-url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png')

    animation-duration: $middleground-speed

    &.layered

      animation-delay: $middleground-speed/2

  &.background

    background-image: image-url('https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png')

    animation-duration: $background-speed

    &.layered

      animation-delay: $background-speed/2

​

@keyframes snow

  0%

    transform: translate3d(0,-100%,0)

  100%

    transform: translate3d(5%,100%,0)

​