Sine Wave SCSS

by jrweinb

HTML

<div class="animation-container">
	<div class="snow">
		<div class="flake">
			<div class="inner"></div>
		</div>
	</div>
</div>

SCSS

$n: 64;
$d: 10px;
$totalTime: 10s;
$maxYPhase: 20px;
$totalXDistance: 700px;
$interval: $totalTime/$n;

.animation-container {
    background: red;
    position: relative;
    height: 700px;
    width: 100%;
    margin: 0 auto;
    max-width: 1000px;
    overflow: hidden;
    z-index: 2;
  }

  .snow {
    width: 30px;
    height: 30px;
    pointer-events: none;
    margin-left: 20%;
    -webkit-animation: sineDrop $totalTime linear infinite forwards;
  }

  .flake {
    display: inline-block;
    height: 100%;
    width: 100%;
    -webkit-transform: scale(0.5);
  }

  .inner {
/*     background-image: url("../img/animation/snowflake.svg");
     */    
    background: #fff;
    display: inline-block;
    height: 100%;
    width: 100%;
    z-index: 2;
    -webkit-animation: snowRotate $totalTime linear infinite forwards;
/*     @include transition(all 1.4s cubic-bezier(.17, .67, .83, .67));
    @include css-tform(translate3d(0, -100%, 0)); */
  }
@-webkit-keyframes sineDrop {
  $s: ();
  @for $i from 0 through $n {
    #{$i*100%/$n} {
      $y: -1 * sin(2.807 * $i * (pi()/90));
      -webkit-transform: translate($y * $maxYPhase, ($i/$n) * ($totalXDistance) - $d);
    }
  }
}

@mixin rotate($degrees) {
    -webkit-transform: rotate($degrees);
    -moz-transform: rotate($degrees);
    -ms-transform: rotate($degrees);
    -o-transform: rotate($degrees);
    transform: rotate($degrees);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})";
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=#{-1*sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)});
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

@include...