CODE FOR SNOWFLAKES WHICH FADE OUT

}

Please comment if you are using this code!<3

To enable snowflakes on your SpaceHey profile which fade out as they fall, simply insert the following code into both your about me and your HTML/CSS section !:) Example on my profile!!

CODE:

<div class="snowflakes">

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

  <div class="snowflake"><img src="https://i.postimg.cc/mg1pLmyx/IMG-1135.png"/>

<style>

@-webkit-keyframes snowflakes-fall {

  0%   { top: -10%; opacity: 1; }

  70%  { opacity: 1; }

  100% { top: 100%; opacity: 0; }

}

@-webkit-keyframes snowflakes-shake {

  0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }

  50%      { -webkit-transform: translateX(80px); transform: translateX(80px); }

}

@keyframes snowflakes-fall {

  0%   { top: -10%; opacity: 1; }

  70%  { opacity: 1; }

  100% { top: 100%; opacity: 0; }

}

@keyframes snowflakes-shake {

  0%, 100% { transform: translateX(0); }

  50%      { transform: translateX(80px); }

}

.snowflake {

  position: fixed;

  top: -10%;

  z-index: 9999;

  pointer-events: none;

  animation-name: snowflakes-fall, snowflakes-shake;

  animation-duration: 10s, 3s;

  animation-timing-function: linear, ease-in-out;

  animation-iteration-count: infinite, infinite;

  animation-play-state: running, running;

}

.snowflake img {

  width: 20px;

  height: 20px;

  opacity: 1;

}

.snowflake:nth-of-type(1)  { left: 10%; animation-delay: 0s, 0s; }

.snowflake:nth-of-type(2)  { left: 20%; animation-delay: 2s, 1s; }

.snowflake:nth-of-type(3)  { left: 30%; animation-delay: 4s, 2s; }

.snowflake:nth-of-type(4)  { left: 40%; animation-delay: 1s, 0.5s; }

.snowflake:nth-of-type(5)  { left: 50%; animation-delay: 3s, 1.5s; }

.snowflake:nth-of-type(6)  { left: 60%; animation-delay: 5s, 1s; }

.snowflake:nth-of-type(7)  { left: 70%; animation-delay: 0.5s, 2s; }

.snowflake:nth-of-type(8)  { left: 80%; animation-delay: 1.5s, 0s; }

</style>

}