CodePen Embed - Netflix Intro Animation Pure CSS

<div id="container">
<!-- Edit the letter attr to: N, E, T, F, L, I or X -->
   <netflixintro letter="N">
    <div class="helper-1">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
      <div class="effect-lumieres">
        <span class="lamp-1"></span>
        <span class="lamp-2"></span>
        <span class="lamp-3"></span>
        <span class="lamp-4"></span>
        <span class="lamp-5"></span>
        <span class="lamp-6"></span>
        <span class="lamp-7"></span>
        <span class="lamp-8"></span>
        <span class="lamp-9"></span>
        <span class="lamp-10"></span>
        <span class="lamp-11"></span>
        <span class="lamp-12"></span>
        <span class="lamp-13"></span>
        <span class="lamp-14"></span>
        <span class="lamp-15"></span>
        <span class="lamp-16"></span>
        <span class="lamp-17"></span>
        <span class="lamp-18"></span>
        <span class="lamp-19"></span>
        <span class="lamp-20"></span>
        <span class="lamp-21"></span>
        <span class="lamp-22"></span>
        <span class="lamp-23"></span>
        <span class="lamp-24"></span>
        <span class="lamp-25"></span>
        <span class="lamp-26"></span>
        <span class="lamp-27"></span>
        <span class="lamp-28"></span>
      </div>
    </div>
    <div class="helper-2">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
    </div>
    <div class="helper-3">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
    </div>
    <div class="helper-4">
      <div class="effect-brush">
        <span class="fur-31"></span>
        <span class="fur-30"></span>
        <span class="fur-29"></span>
        <span class="fur-28"></span>
        <span class="fur-27"></span>
        <span class="fur-26"></span>
        <span class="fur-25"></span>
        <span class="fur-24"></span>
        <span class="fur-23"></span>
        <span class="fur-22"></span>
        <span class="fur-21"></span>
        <span class="fur-20"></span>
        <span class="fur-19"></span>
        <span class="fur-18"></span>
        <span class="fur-17"></span>
        <span class="fur-16"></span>
        <span class="fur-15"></span>
        <span class="fur-14"></span>
        <span class="fur-13"></span>
        <span class="fur-12"></span>
        <span class="fur-11"></span>
        <span class="fur-10"></span>
        <span class="fur-9"></span>
        <span class="fur-8"></span>
        <span class="fur-7"></span>
        <span class="fur-6"></span>
        <span class="fur-5"></span>
        <span class="fur-4"></span>
        <span class="fur-3"></span>
        <span class="fur-2"></span>
        <span class="fur-1"></span>
      </div>
    </div>
  </netflixintro>
</div>

html,
body
  margin: 0
  padding: 0
  width: 100%
  height: 100%

$bg-color: #000000
$base-color: #e40913

#container
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  width: 100%
  height: 100%
  background-color: $bg-color
  overflow: hidden
  
  netflixintro
    display: block
    position: relative
    width: 300px
    height: 300px
    overflow: hidden
    animation-name: zoom-in
    animation-delay: .5s
    animation-duration: 3.5s
    animation-timing-function: ease-in
    animation-fill-mode: forwards
    background-size: 4000px
    background-position: -1950px 0
    &::before
      content: ""
      position: absolute
      display: block
      background-color: $bg-color
      width: 150%
      height: 30%
      left: -25%
      bottom: -27%
      border-radius: 50%
      z-index: 5
      transform-origin: left center
      background-size: 4000px
      background-position: -1950px 0
  
    &[letter="N"]
      transform-origin: 30% center
      .helper-1
        width: 19.5%
        height: 100%
        background-color: rgba($base-color, .5)
        left: 22.4%
        top: 0
        transform: rotate(180deg)
        animation-name: fading-lumieres-box
        animation-duration: 2s
        animation-delay: .6s
        animation-fill-mode: forwards
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2.5s
          animation-fill-mode: forwards
          animation-delay: 1.2s
          [class*="fur-"]
            bottom: 0
            height: 40%
      .helper-3
        width: 19%
        height: 150%
        left: 40.5%
        top: -25%
        transform: rotate(-19.5deg)
        box-shadow: 0px 0px 35px -12px rgba(0, 0, 0, .4)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .8s
      .helper-2
        width: 19.5%
        height: 100%
        left: 57.8%
        top: 0
        transform: rotate(180deg)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .5s
  
    &[letter="E"]
      transform-origin: 30% center
      .helper-1
        width: 19.5%
        height: 100%
        background-color: rgba($base-color, .5)
        left: 22%
        top: 0
        transform: rotate(180deg)
        animation-name: fading-lumieres-box
        animation-duration: 2s
        animation-delay: .6s
        animation-fill-mode: forwards
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2.5s
          animation-fill-mode: forwards
          animation-delay: 1.2s
          [class*="fur-"]
            bottom: 0
            height: 40%
      .helper-2
        width: 17.5%
        height: 50%
        left: 38%
        top: -49px
        transform: rotate(270deg)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .8s
      .helper-3
        width: 17%
        height: 39%
        left: 33%
        top: 29%
        transform: rotate(-90deg)
        box-shadow: 0px 0px 35px -12px rgba(0, 0, 0, 0.4)
        overflow: hidden
        animation-name: fading-out
        animation-duration: 2s
        animation-fill-mode: forwards
        animation-delay: 1s
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .6s
      .helper-4
        width: 17.5%
        height: 50%
        left: 38%
        top: 196px
        transform: rotate(270deg)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .4s
          animation-delay: .5s
  
    &[letter="T"]
      transform-origin: center center
      .helper-1
        width: 19.5%
        height: 100%
        background-color: rgba($base-color, .5)
        left: 38%
        top: 0
        transform: rotate(180deg)
        animation-name: fading-lumieres-box
        animation-duration: 2s
        animation-delay: .6s
        animation-fill-mode: forwards
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2.5s
          animation-fill-mode: forwards
          animation-delay: 1s
          [class*="fur-"]
            bottom: 0
            height: 40%
      .helper-2
        width: 17.5%
        height: 54%
        left: 39%
        top: -55px
        transform: rotate(270deg)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .5s


    &[letter="F"]
      transform-origin: 30% center
      .helper-1
        width: 19.5%
        height: 100%
        background-color: rgba($base-color, .5)
        left: 22%
        top: 0
        transform: rotate(180deg)
        animation-name: fading-lumieres-box
        animation-duration: 2s
        animation-delay: .6s
        animation-fill-mode: forwards
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2.5s
          animation-fill-mode: forwards
          animation-delay: 1.2s
          [class*="fur-"]
            bottom: 0
            height: 40%
      .helper-2
        width: 17.5%
        height: 50%
        left: 38%
        top: -49px
        transform: rotate(270deg)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .7s
      .helper-3
        width: 17%
        height: 39%
        left: 33%
        top: 29%
        transform: rotate(-90deg)
        box-shadow: 0px 0px 35px -12px rgba(0, 0, 0, 0.4)
        overflow: hidden
        animation-name: fading-out
        animation-duration: 2s
        animation-fill-mode: forwards
        animation-delay: 1s
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .5s


    &[letter="L"]
      transform-origin: 30% center
      .helper-1
        width: 19.5%
        height: 100%
        background-color: rgba($base-color, .5)
        left: 22%
        top: 0
        transform: rotate(180deg)
        animation-name: fading-lumieres-box
        animation-duration: 2s
        animation-delay: .6s
        animation-fill-mode: forwards
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2.5s
          animation-fill-mode: forwards
          animation-delay: .8s
          [class*="fur-"]
            bottom: 0
            height: 40%
      .helper-2
        width: 17.5%
        height: 50%
        left: 38%
        top: 196px
        transform: rotate(270deg)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .4s

    &[letter="I"]
      transform-origin: center center
      .helper-1
        width: 19.5%
        height: 100%
        background-color: rgba($base-color, .5)
        left: 38%
        top: 0
        transform: rotate(180deg)
        animation-name: fading-lumieres-box
        animation-duration: 2s
        animation-delay: .6s
        animation-fill-mode: forwards
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2.5s
          animation-fill-mode: forwards
          animation-delay: 1s
          [class*="fur-"]
            bottom: 0
            height: 40%

    &[letter="X"]
      transform-origin: center center
      .helper-1
        width: 19%
        height: 150%
        left: 40.5%
        top: -25%
        transform: rotate(-19.5deg)
        animation-name: fading-lumieres-box
        animation-duration: 2s
        animation-delay: .6s
        animation-fill-mode: forwards
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2.5s
          animation-fill-mode: forwards
          animation-delay: 1.2s
          [class*="fur-"]
            bottom: 0
            height: 40%
      .helper-2
        width: 19%
        height: 150%
        left: 40.5%
        top: -25%
        transform: rotate(19.5deg)
        overflow: hidden
        .effect-brush
          animation-name: brush-moving
          animation-duration: 2s
          animation-fill-mode: forwards
          animation-delay: .5s

    [class*="helper-"]
      position: absolute
      
      .effect-brush
        position: absolute
        width: 100%
        height: 300%
        top: 0
        overflow: hidden
        &::before
          display: block
          content: ""
          position: absolute
          background-color: $base-color
          width: 100%
          height: 70%
          box-shadow: 0px 0px 29px 24px $base-color
        
        [class*="fur-"]
          display: block
          position: absolute
          bottom: 10%
          height: 30%

        .fur-1
          left: 0%
          width: 3.8%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 15%, rgba(0, 0, 0, 0) 81%, rgba(0, 0, 0, 0) 100%)
        .fur-2
          left: 3.8%
          width: 2.8%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 10%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0) 100%)
        .fur-3
          left: 6.6%
          width: 4.8%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)
        .fur-4
          left: 11.4%
          width: 4%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 23%, rgba(0, 0, 0, 0) 100%)
        .fur-5
          left: 15.4%
          width: 4%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 15%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%)
        .fur-6
          left: 19.4%
          width: 2.5%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 27%, rgba(0, 0, 0, 0) 89%, rgba(0, 0, 0, 0) 100%)
        .fur-7
          left: 21.9%
          width: 4%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 20%, rgba(0, 0, 0, 0) 100%)
        .fur-8
          left: 25.9%
          width: 2%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 30%, rgba(0, 0, 0, 0) 100%)
        .fur-9
          left: 27.9%
          width: 4%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 35%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
        .fur-10
          left: 31.9%
          width: 3.5%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 39%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
        .fur-11
          left: 35.4%
          width: 2%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 34%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
        .fur-12
          left: 37.4%
          width: 2.6%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 22%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
        .fur-13
          left: 40%
          width: 6%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 47%, rgba(0, 0, 0, 0) 100%)
        .fur-14
          left: 46%
          width: 2%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 36%, rgba(0, 0, 0, 0) 100%)
        .fur-15
          left: 48%
          width: 5.5%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 29%, rgba(0, 0, 0, 0) 100%)
        .fur-16
          left: 53.5%
          width: 3%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 39%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
        .fur-17
          left: 56.5%
          width: 4.1%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 45%, rgba(0, 0, 0, 0) 100%)
        .fur-18
          left: 60.6%
          width: 2.4%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 34%, rgba(0, 0, 0, 0) 100%)
        .fur-19
          left: 63%
          width: 4%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 47%, rgba(0, 0, 0, 0) 100%)
        .fur-20
          left: 67%
          width: 1.5%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 27%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%)
        .fur-21
          left: 68.5%
          width: 2.8%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)
        .fur-22
          left: 71.3%
          width: 2.3%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 9%, rgba(0, 0, 0, 0) 100%)
        .fur-23
          left: 73.6%
          width: 2.2%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 28%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%)
        .fur-24
          left: 75.8%
          width: 1%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)
        .fur-25
          left: 76.8%
          width: 2.1%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 28%, rgba(0, 0, 0, 0) 100%)
        .fur-26
          left: 78.9%
          width: 4.1%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 34%, rgba(0, 0, 0, 0) 100%)
        .fur-27
          left: 83%
          width: 2.5%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 21%, rgba(0, 0, 0, 0) 100%)
        .fur-28
          left: 85.5%
          width: 4.5%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 39%, rgba(0, 0, 0, 0) 100%)
        .fur-29
          left: 90%
          width: 2.8%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 30%, rgba(0, 0, 0, 0) 100%)
        .fur-30
          left: 92.8%
          width: 3.5%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 19%, rgba(0, 0, 0, 0) 100%)
        .fur-31
          left: 96.3%
          width: 3.7%
          background: linear-gradient(to bottom, $base-color 0%, $base-color 37%, rgba(0, 0, 0, 0) 100%)

      .effect-lumieres
        position: absolute
        width: 100%
        height: 100%
        opacity: 0
        animation-name: showing-lumieres
        animation-duration: 2s
        animation-delay: 1.6s
        animation-fill-mode: forwards

        [class*="lamp-"]
          position: absolute
          display: block
          height: 100%
          box-shadow: 0px 0px 10px 0px rgba($base-color, 0.75)
          background: var(--color)

          &::before
            position: absolute
            content: " "
            display: block
            width: 100%
            height: 100%
            background: var(--color)
            box-shadow: 0px 0px 10px 0px rgba($base-color, 0.75)

        .lamp-1
          --color: #ff0100
          z: 6
          left: 0.7%
          width: 1%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-2
          --color: #ffde01
          left: 2.2%
          width: 1.4%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-3
          --color: #ff00cc
          left: 5.8%
          width: 2.1%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-4
          --color: #04fd8f
          left: 10.1%
          width: 2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-5
          --color: #ff0100
          left: 12.9%
          width: 1.4%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-6
          --color: #ff9600
          left: 15.3%
          width: 2.8%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-7
          --color: #0084ff
          left: 21.2%
          width: 2.5%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-8
          --color: #f84006
          left: 25%
          width: 2.5%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-9
          --color: #ffc601
          left: 30.5%
          width: 3%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-10
          --color: #ff4800
          left: 36.3%
          width: 3%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-11
          --color: #fd0100
          left: 41%
          width: 2.2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-12
          --color: #01ffff
          left: 44.2%
          width: 2.6%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-13
          --color: #ffc601
          left: 51.7%
          width: 0.5%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-14
          --color: #ffc601
          left: 52.1%
          width: 1.8%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-15
          --color: #0078fe
          left: 53.8%
          width: 2.3%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-16
          --color: #0080ff
          left: 57.2%
          width: 2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-17
          --color: #ffae01
          left: 62.3%
          width: 2.9%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-18
          --color: #ff00bf
          left: 65.8%
          width: 1.7%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-19
          --color: #a601f4
          left: 72.8%
          width: 0.8%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-20
          --color: #f30b34
          left: 74.3%
          width: 2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-21
          --color: #ff00bf
          left: 79.8%
          width: 2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-22
          --color: #04fd8f
          left: 78.2%
          width: 2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-23
          --color: #01ffff
          left: 78.5%
          width: 2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-24
          --color: #a201ff
          left: 85.3%
          width: 1.1%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-25
          --color: #ec0014
          left: 86.9%
          width: 1.1%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-26
          --color: #0078fe
          left: 88.8%
          width: 2%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-27
          --color: #ff0036
          left: 92.4%
          width: 2.4%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s
        .lamp-28
          --color: #06f98c
          left: 96.2%
          width: 2.1%
          animation-delay: (random(200) / 100) + s
          &::before
            left: percentage((random(200) / 100))
            animation-delay: (random(200) / 100) + s

        .lamp-1,
        .lamp-3,
        .lamp-5,
        .lamp-7,
        .lamp-9,
        .lamp-11,
        .lamp-13,
        .lamp-15,
        .lamp-17,
        .lamp-19,
        .lamp-21,
        .lamp-23,
        .lamp-25,
        .lamp-27
          animation-name: lumieres-moving-left
          animation-duration: 5s
          animation-fill-mode: forwards
          &::before 
            animation-name: lumieres-moving-left
            animation-duration: 5.5s
         
        .lamp-2,
        .lamp-4,
        .lamp-6,
        .lamp-8,
        .lamp-10,
        .lamp-12,
        .lamp-14,
        .lamp-16,
        .lamp-18,
        .lamp-20,
        .lamp-22,
        .lamp-24,
        .lamp-26,
        .lamp-28
          animation-name: lumieres-moving-right
          animation-duration: 5s
          animation-fill-mode: forwards
          &::before 
            animation-name: lumieres-moving-right
            animation-duration: 5.5s
          
@keyframes brush-moving
  0%
    transform: translateY(0)
  100%
    transform: translateY(-100%)
  
@keyframes fading-out
  0%
    opacity: 1
  100%
    opacity: 0

@keyframes lumieres-moving-right
  0%
    transform: translate(0)
  40%
    transform: translate(-10px) scaleX(1)
  50%
    transform: translate(-60px)
  100%
    transform: translate(-120px) scaleX(3)

@keyframes lumieres-moving-left
  0%
    transform: translate(0)
  40%
    transform: translate(10px) scaleX(1)
  50%
    transform: translate(60px)
  100%
    transform: translate(120px) scaleX(3)

@keyframes zoom-in
  0%
    transform: scale(1)
  100%
    transform: scale(15)

@keyframes showing-lumieres
  0%
    opacity: 0
  100%
    opacity: 1

@keyframes fading-lumieres-box
  0%
    background-color: rgba($base-color, .5)
  100%
    background-color: rgba($base-color, .0)

View Compiled

// no javascript =)

This Pen is owned by Claudio Bonfati on CodePen.

See more by @claudio_bonfati on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.