A Pen by Jesse Taylor - saved as gist

Falling-snowflakes-CSS-only.markdown

Falling snowflakes CSS only

CSS animation of falling snowflakes using SASS

A Pen

License.

index.html

<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>

<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>

<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>

<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>
<span>k</span>
<span>h</span>
<span>l</span>
<span>d</span>
<span>k</span>

style.scss

@import "compass";
$snowflakes: 240;

@font-face {
  font-family: snowflakes;
  src: url(http://ff.static.1001fonts.net/k/r/kr-kinda-flakey.regular.ttf);
}

html {
   background: #111; 
   height:2000px;
   overflow:hidden;
}

span {
  font-family: snowflakes;
  color:gray;
  float:left;
  display:block;

  @for $i from 1 through $snowflakes{
      &:nth-child(#{$i}) {
          animation: rotate random(100)+ 50 + s linear infinite, slide random(100) + s linear infinite;
          font-size:random(100) + 50 + px;
          position:absolute;
          top:random(100) - 300 + px;
          left: random(100) *1%;
          
      }
  }

}

@keyframes rotate {
  from {transform: rotate(0deg)}; 
  to {transform: rotate(360deg)};     
}

@keyframes slide {
  from {top:-300px}; 
  to {top:600px};     
}