Skip to content

Instantly share code, notes, and snippets.

@CrazyBoy49z

CrazyBoy49z/index.html

Created May 6, 2022 22:47
Show Gist options
  • Save CrazyBoy49z/0683ea7b6163bd163e75810b239b6fbe to your computer and use it in GitHub Desktop.
Save CrazyBoy49z/0683ea7b6163bd163e75810b239b6fbe to your computer and use it in GitHub Desktop.
Download ZIP
Netflix Intro Animation Pure CSS
Raw
index.html
<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>
Raw
script.js
// no javascript =)
Raw
style.sass
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment