Generated by SassMeister.com.

SassMeister-input-HTML.haml

%ul.matrix
  - (0..19).each do |c|
    %li

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";
 
$matrix-font-size: 18px;
$matrix-line-height: 24px;
$matrix-color: #f60056;
$matrix-width: 12;
$matrix-height: 30;
$matrix-characters: SassConf SassConf;

$nbsp: "\00a0";

$frames-count: $matrix-height;

@function rand($min: 1, $max: 100) {
  @return random($max - $min) + $min;
}

@function random-character() {
  $length: length($matrix-characters);
  @return nth($matrix-characters, rand($max: $length));
}

@function new-column($height) {
  $result: ();
  $length: length($matrix-characters);
  @for $i from 1 through $height {
    $result: append($result, random-character());
  }
  @return $result;
}

@function create-columns($number) {
  $columns: ();
  @for $i from 1 through $height {
    $columns: append($columns, new-column($matrix-height));
  }
  @return $columns;
}

body {
  font-family: Courier;
  background: #1a122f;
  overflow: hidden;
}

.matrix {
  @include inline-list;
  color: $matrix-color;
  font-size: $matrix-font-size;
  line-height: $matrix-line-height;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

@for $i from 1 through $matrix-width {
  $column-height: rand(4, $matrix-height);
  $column-position: rand(1, $matrix-height);
  $column: new-column($matrix-height);
  .matrix li:nth-child(#{$i}) {
    position: relative;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    &:before {
      display: block;
      width: 8em;
      content: "#{$column}";
    }
    &:after {
      @include box-sizing(border-box);
      background: linear-gradient(rgba(#1a122f, 1) 0, rgba(#1a122f, 0) $matrix-line-height * ($column-height - 1), rgba(#1a122f, 1) $matrix-line-height * ($column-height - 1), rgba(#1a122f, 1) $matrix-line-height * $matrix-height) 0 $matrix-line-height * ($column-position - $column-height) repeat;
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      color: white;
      content: "#{nth($column, $column-position)}";
      padding-top: ($column-position - 1) * $matrix-line-height;
      overflow: hidden;
      -webkit-animation: $frames-count * 80ms column-#{$i} infinite steps(1, start);
    }
  }
  @-webkit-keyframes column-#{$i} {
    @for $frame from 1 through $frames-count {
      @if $column-position > $matrix-height {
        $column-position: 1;
      }
      #{100% * ($frame - 1) / $frames-count} {
        background-position: 0 $matrix-line-height * ($column-position - $column-height);
        padding-top: ($column-position - 1) * $matrix-line-height;
      }
      $column-position: $column-position + 1;
    }
  }
}

SassMeister-output.css

body {
  font-family: Courier;
  background: #1a122f;
  overflow: hidden;
}

.matrix {
  list-style-type: none;
  color: #f60056;
  font-size: 18px;
  line-height: 24px;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}
.matrix, .matrix li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

.matrix li:nth-child(1) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(1):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(1):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 456px, #1a122f 456px, #1a122f 720px) 0 -312px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 144px;
  overflow: hidden;
  -webkit-animation: 2400ms column-1 infinite steps(1, start);
}

@-webkit-keyframes column-1 {
  0% {
    background-position: 0 -312px;
    padding-top: 144px;
  }

  3.33333% {
    background-position: 0 -288px;
    padding-top: 168px;
  }

  6.66667% {
    background-position: 0 -264px;
    padding-top: 192px;
  }

  10% {
    background-position: 0 -240px;
    padding-top: 216px;
  }

  13.33333% {
    background-position: 0 -216px;
    padding-top: 240px;
  }

  16.66667% {
    background-position: 0 -192px;
    padding-top: 264px;
  }

  20% {
    background-position: 0 -168px;
    padding-top: 288px;
  }

  23.33333% {
    background-position: 0 -144px;
    padding-top: 312px;
  }

  26.66667% {
    background-position: 0 -120px;
    padding-top: 336px;
  }

  30% {
    background-position: 0 -96px;
    padding-top: 360px;
  }

  33.33333% {
    background-position: 0 -72px;
    padding-top: 384px;
  }

  36.66667% {
    background-position: 0 -48px;
    padding-top: 408px;
  }

  40% {
    background-position: 0 -24px;
    padding-top: 432px;
  }

  43.33333% {
    background-position: 0 0px;
    padding-top: 456px;
  }

  46.66667% {
    background-position: 0 24px;
    padding-top: 480px;
  }

  50% {
    background-position: 0 48px;
    padding-top: 504px;
  }

  53.33333% {
    background-position: 0 72px;
    padding-top: 528px;
  }

  56.66667% {
    background-position: 0 96px;
    padding-top: 552px;
  }

  60% {
    background-position: 0 120px;
    padding-top: 576px;
  }

  63.33333% {
    background-position: 0 144px;
    padding-top: 600px;
  }

  66.66667% {
    background-position: 0 168px;
    padding-top: 624px;
  }

  70% {
    background-position: 0 192px;
    padding-top: 648px;
  }

  73.33333% {
    background-position: 0 216px;
    padding-top: 672px;
  }

  76.66667% {
    background-position: 0 240px;
    padding-top: 696px;
  }

  80% {
    background-position: 0 -456px;
    padding-top: 0px;
  }

  83.33333% {
    background-position: 0 -432px;
    padding-top: 24px;
  }

  86.66667% {
    background-position: 0 -408px;
    padding-top: 48px;
  }

  90% {
    background-position: 0 -384px;
    padding-top: 72px;
  }

  93.33333% {
    background-position: 0 -360px;
    padding-top: 96px;
  }

  96.66667% {
    background-position: 0 -336px;
    padding-top: 120px;
  }
}
.matrix li:nth-child(2) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(2):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(2):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 96px, #1a122f 96px, #1a122f 720px) 0 240px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 336px;
  overflow: hidden;
  -webkit-animation: 2400ms column-2 infinite steps(1, start);
}

@-webkit-keyframes column-2 {
  0% {
    background-position: 0 240px;
    padding-top: 336px;
  }

  3.33333% {
    background-position: 0 264px;
    padding-top: 360px;
  }

  6.66667% {
    background-position: 0 288px;
    padding-top: 384px;
  }

  10% {
    background-position: 0 312px;
    padding-top: 408px;
  }

  13.33333% {
    background-position: 0 336px;
    padding-top: 432px;
  }

  16.66667% {
    background-position: 0 360px;
    padding-top: 456px;
  }

  20% {
    background-position: 0 384px;
    padding-top: 480px;
  }

  23.33333% {
    background-position: 0 408px;
    padding-top: 504px;
  }

  26.66667% {
    background-position: 0 432px;
    padding-top: 528px;
  }

  30% {
    background-position: 0 456px;
    padding-top: 552px;
  }

  33.33333% {
    background-position: 0 480px;
    padding-top: 576px;
  }

  36.66667% {
    background-position: 0 504px;
    padding-top: 600px;
  }

  40% {
    background-position: 0 528px;
    padding-top: 624px;
  }

  43.33333% {
    background-position: 0 552px;
    padding-top: 648px;
  }

  46.66667% {
    background-position: 0 576px;
    padding-top: 672px;
  }

  50% {
    background-position: 0 600px;
    padding-top: 696px;
  }

  53.33333% {
    background-position: 0 -96px;
    padding-top: 0px;
  }

  56.66667% {
    background-position: 0 -72px;
    padding-top: 24px;
  }

  60% {
    background-position: 0 -48px;
    padding-top: 48px;
  }

  63.33333% {
    background-position: 0 -24px;
    padding-top: 72px;
  }

  66.66667% {
    background-position: 0 0px;
    padding-top: 96px;
  }

  70% {
    background-position: 0 24px;
    padding-top: 120px;
  }

  73.33333% {
    background-position: 0 48px;
    padding-top: 144px;
  }

  76.66667% {
    background-position: 0 72px;
    padding-top: 168px;
  }

  80% {
    background-position: 0 96px;
    padding-top: 192px;
  }

  83.33333% {
    background-position: 0 120px;
    padding-top: 216px;
  }

  86.66667% {
    background-position: 0 144px;
    padding-top: 240px;
  }

  90% {
    background-position: 0 168px;
    padding-top: 264px;
  }

  93.33333% {
    background-position: 0 192px;
    padding-top: 288px;
  }

  96.66667% {
    background-position: 0 216px;
    padding-top: 312px;
  }
}
.matrix li:nth-child(3) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(3):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(3):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 624px, #1a122f 624px, #1a122f 720px) 0 -288px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 336px;
  overflow: hidden;
  -webkit-animation: 2400ms column-3 infinite steps(1, start);
}

@-webkit-keyframes column-3 {
  0% {
    background-position: 0 -288px;
    padding-top: 336px;
  }

  3.33333% {
    background-position: 0 -264px;
    padding-top: 360px;
  }

  6.66667% {
    background-position: 0 -240px;
    padding-top: 384px;
  }

  10% {
    background-position: 0 -216px;
    padding-top: 408px;
  }

  13.33333% {
    background-position: 0 -192px;
    padding-top: 432px;
  }

  16.66667% {
    background-position: 0 -168px;
    padding-top: 456px;
  }

  20% {
    background-position: 0 -144px;
    padding-top: 480px;
  }

  23.33333% {
    background-position: 0 -120px;
    padding-top: 504px;
  }

  26.66667% {
    background-position: 0 -96px;
    padding-top: 528px;
  }

  30% {
    background-position: 0 -72px;
    padding-top: 552px;
  }

  33.33333% {
    background-position: 0 -48px;
    padding-top: 576px;
  }

  36.66667% {
    background-position: 0 -24px;
    padding-top: 600px;
  }

  40% {
    background-position: 0 0px;
    padding-top: 624px;
  }

  43.33333% {
    background-position: 0 24px;
    padding-top: 648px;
  }

  46.66667% {
    background-position: 0 48px;
    padding-top: 672px;
  }

  50% {
    background-position: 0 72px;
    padding-top: 696px;
  }

  53.33333% {
    background-position: 0 -624px;
    padding-top: 0px;
  }

  56.66667% {
    background-position: 0 -600px;
    padding-top: 24px;
  }

  60% {
    background-position: 0 -576px;
    padding-top: 48px;
  }

  63.33333% {
    background-position: 0 -552px;
    padding-top: 72px;
  }

  66.66667% {
    background-position: 0 -528px;
    padding-top: 96px;
  }

  70% {
    background-position: 0 -504px;
    padding-top: 120px;
  }

  73.33333% {
    background-position: 0 -480px;
    padding-top: 144px;
  }

  76.66667% {
    background-position: 0 -456px;
    padding-top: 168px;
  }

  80% {
    background-position: 0 -432px;
    padding-top: 192px;
  }

  83.33333% {
    background-position: 0 -408px;
    padding-top: 216px;
  }

  86.66667% {
    background-position: 0 -384px;
    padding-top: 240px;
  }

  90% {
    background-position: 0 -360px;
    padding-top: 264px;
  }

  93.33333% {
    background-position: 0 -336px;
    padding-top: 288px;
  }

  96.66667% {
    background-position: 0 -312px;
    padding-top: 312px;
  }
}
.matrix li:nth-child(4) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(4):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(4):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 216px, #1a122f 216px, #1a122f 720px) 0 48px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 264px;
  overflow: hidden;
  -webkit-animation: 2400ms column-4 infinite steps(1, start);
}

@-webkit-keyframes column-4 {
  0% {
    background-position: 0 48px;
    padding-top: 264px;
  }

  3.33333% {
    background-position: 0 72px;
    padding-top: 288px;
  }

  6.66667% {
    background-position: 0 96px;
    padding-top: 312px;
  }

  10% {
    background-position: 0 120px;
    padding-top: 336px;
  }

  13.33333% {
    background-position: 0 144px;
    padding-top: 360px;
  }

  16.66667% {
    background-position: 0 168px;
    padding-top: 384px;
  }

  20% {
    background-position: 0 192px;
    padding-top: 408px;
  }

  23.33333% {
    background-position: 0 216px;
    padding-top: 432px;
  }

  26.66667% {
    background-position: 0 240px;
    padding-top: 456px;
  }

  30% {
    background-position: 0 264px;
    padding-top: 480px;
  }

  33.33333% {
    background-position: 0 288px;
    padding-top: 504px;
  }

  36.66667% {
    background-position: 0 312px;
    padding-top: 528px;
  }

  40% {
    background-position: 0 336px;
    padding-top: 552px;
  }

  43.33333% {
    background-position: 0 360px;
    padding-top: 576px;
  }

  46.66667% {
    background-position: 0 384px;
    padding-top: 600px;
  }

  50% {
    background-position: 0 408px;
    padding-top: 624px;
  }

  53.33333% {
    background-position: 0 432px;
    padding-top: 648px;
  }

  56.66667% {
    background-position: 0 456px;
    padding-top: 672px;
  }

  60% {
    background-position: 0 480px;
    padding-top: 696px;
  }

  63.33333% {
    background-position: 0 -216px;
    padding-top: 0px;
  }

  66.66667% {
    background-position: 0 -192px;
    padding-top: 24px;
  }

  70% {
    background-position: 0 -168px;
    padding-top: 48px;
  }

  73.33333% {
    background-position: 0 -144px;
    padding-top: 72px;
  }

  76.66667% {
    background-position: 0 -120px;
    padding-top: 96px;
  }

  80% {
    background-position: 0 -96px;
    padding-top: 120px;
  }

  83.33333% {
    background-position: 0 -72px;
    padding-top: 144px;
  }

  86.66667% {
    background-position: 0 -48px;
    padding-top: 168px;
  }

  90% {
    background-position: 0 -24px;
    padding-top: 192px;
  }

  93.33333% {
    background-position: 0 0px;
    padding-top: 216px;
  }

  96.66667% {
    background-position: 0 24px;
    padding-top: 240px;
  }
}
.matrix li:nth-child(5) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(5):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(5):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 72px, #1a122f 72px, #1a122f 720px) 0 432px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 504px;
  overflow: hidden;
  -webkit-animation: 2400ms column-5 infinite steps(1, start);
}

@-webkit-keyframes column-5 {
  0% {
    background-position: 0 432px;
    padding-top: 504px;
  }

  3.33333% {
    background-position: 0 456px;
    padding-top: 528px;
  }

  6.66667% {
    background-position: 0 480px;
    padding-top: 552px;
  }

  10% {
    background-position: 0 504px;
    padding-top: 576px;
  }

  13.33333% {
    background-position: 0 528px;
    padding-top: 600px;
  }

  16.66667% {
    background-position: 0 552px;
    padding-top: 624px;
  }

  20% {
    background-position: 0 576px;
    padding-top: 648px;
  }

  23.33333% {
    background-position: 0 600px;
    padding-top: 672px;
  }

  26.66667% {
    background-position: 0 624px;
    padding-top: 696px;
  }

  30% {
    background-position: 0 -72px;
    padding-top: 0px;
  }

  33.33333% {
    background-position: 0 -48px;
    padding-top: 24px;
  }

  36.66667% {
    background-position: 0 -24px;
    padding-top: 48px;
  }

  40% {
    background-position: 0 0px;
    padding-top: 72px;
  }

  43.33333% {
    background-position: 0 24px;
    padding-top: 96px;
  }

  46.66667% {
    background-position: 0 48px;
    padding-top: 120px;
  }

  50% {
    background-position: 0 72px;
    padding-top: 144px;
  }

  53.33333% {
    background-position: 0 96px;
    padding-top: 168px;
  }

  56.66667% {
    background-position: 0 120px;
    padding-top: 192px;
  }

  60% {
    background-position: 0 144px;
    padding-top: 216px;
  }

  63.33333% {
    background-position: 0 168px;
    padding-top: 240px;
  }

  66.66667% {
    background-position: 0 192px;
    padding-top: 264px;
  }

  70% {
    background-position: 0 216px;
    padding-top: 288px;
  }

  73.33333% {
    background-position: 0 240px;
    padding-top: 312px;
  }

  76.66667% {
    background-position: 0 264px;
    padding-top: 336px;
  }

  80% {
    background-position: 0 288px;
    padding-top: 360px;
  }

  83.33333% {
    background-position: 0 312px;
    padding-top: 384px;
  }

  86.66667% {
    background-position: 0 336px;
    padding-top: 408px;
  }

  90% {
    background-position: 0 360px;
    padding-top: 432px;
  }

  93.33333% {
    background-position: 0 384px;
    padding-top: 456px;
  }

  96.66667% {
    background-position: 0 408px;
    padding-top: 480px;
  }
}
.matrix li:nth-child(6) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(6):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(6):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 192px, #1a122f 192px, #1a122f 720px) 0 -120px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 72px;
  overflow: hidden;
  -webkit-animation: 2400ms column-6 infinite steps(1, start);
}

@-webkit-keyframes column-6 {
  0% {
    background-position: 0 -120px;
    padding-top: 72px;
  }

  3.33333% {
    background-position: 0 -96px;
    padding-top: 96px;
  }

  6.66667% {
    background-position: 0 -72px;
    padding-top: 120px;
  }

  10% {
    background-position: 0 -48px;
    padding-top: 144px;
  }

  13.33333% {
    background-position: 0 -24px;
    padding-top: 168px;
  }

  16.66667% {
    background-position: 0 0px;
    padding-top: 192px;
  }

  20% {
    background-position: 0 24px;
    padding-top: 216px;
  }

  23.33333% {
    background-position: 0 48px;
    padding-top: 240px;
  }

  26.66667% {
    background-position: 0 72px;
    padding-top: 264px;
  }

  30% {
    background-position: 0 96px;
    padding-top: 288px;
  }

  33.33333% {
    background-position: 0 120px;
    padding-top: 312px;
  }

  36.66667% {
    background-position: 0 144px;
    padding-top: 336px;
  }

  40% {
    background-position: 0 168px;
    padding-top: 360px;
  }

  43.33333% {
    background-position: 0 192px;
    padding-top: 384px;
  }

  46.66667% {
    background-position: 0 216px;
    padding-top: 408px;
  }

  50% {
    background-position: 0 240px;
    padding-top: 432px;
  }

  53.33333% {
    background-position: 0 264px;
    padding-top: 456px;
  }

  56.66667% {
    background-position: 0 288px;
    padding-top: 480px;
  }

  60% {
    background-position: 0 312px;
    padding-top: 504px;
  }

  63.33333% {
    background-position: 0 336px;
    padding-top: 528px;
  }

  66.66667% {
    background-position: 0 360px;
    padding-top: 552px;
  }

  70% {
    background-position: 0 384px;
    padding-top: 576px;
  }

  73.33333% {
    background-position: 0 408px;
    padding-top: 600px;
  }

  76.66667% {
    background-position: 0 432px;
    padding-top: 624px;
  }

  80% {
    background-position: 0 456px;
    padding-top: 648px;
  }

  83.33333% {
    background-position: 0 480px;
    padding-top: 672px;
  }

  86.66667% {
    background-position: 0 504px;
    padding-top: 696px;
  }

  90% {
    background-position: 0 -192px;
    padding-top: 0px;
  }

  93.33333% {
    background-position: 0 -168px;
    padding-top: 24px;
  }

  96.66667% {
    background-position: 0 -144px;
    padding-top: 48px;
  }
}
.matrix li:nth-child(7) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(7):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(7):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 192px, #1a122f 192px, #1a122f 720px) 0 0px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 192px;
  overflow: hidden;
  -webkit-animation: 2400ms column-7 infinite steps(1, start);
}

@-webkit-keyframes column-7 {
  0% {
    background-position: 0 0px;
    padding-top: 192px;
  }

  3.33333% {
    background-position: 0 24px;
    padding-top: 216px;
  }

  6.66667% {
    background-position: 0 48px;
    padding-top: 240px;
  }

  10% {
    background-position: 0 72px;
    padding-top: 264px;
  }

  13.33333% {
    background-position: 0 96px;
    padding-top: 288px;
  }

  16.66667% {
    background-position: 0 120px;
    padding-top: 312px;
  }

  20% {
    background-position: 0 144px;
    padding-top: 336px;
  }

  23.33333% {
    background-position: 0 168px;
    padding-top: 360px;
  }

  26.66667% {
    background-position: 0 192px;
    padding-top: 384px;
  }

  30% {
    background-position: 0 216px;
    padding-top: 408px;
  }

  33.33333% {
    background-position: 0 240px;
    padding-top: 432px;
  }

  36.66667% {
    background-position: 0 264px;
    padding-top: 456px;
  }

  40% {
    background-position: 0 288px;
    padding-top: 480px;
  }

  43.33333% {
    background-position: 0 312px;
    padding-top: 504px;
  }

  46.66667% {
    background-position: 0 336px;
    padding-top: 528px;
  }

  50% {
    background-position: 0 360px;
    padding-top: 552px;
  }

  53.33333% {
    background-position: 0 384px;
    padding-top: 576px;
  }

  56.66667% {
    background-position: 0 408px;
    padding-top: 600px;
  }

  60% {
    background-position: 0 432px;
    padding-top: 624px;
  }

  63.33333% {
    background-position: 0 456px;
    padding-top: 648px;
  }

  66.66667% {
    background-position: 0 480px;
    padding-top: 672px;
  }

  70% {
    background-position: 0 504px;
    padding-top: 696px;
  }

  73.33333% {
    background-position: 0 -192px;
    padding-top: 0px;
  }

  76.66667% {
    background-position: 0 -168px;
    padding-top: 24px;
  }

  80% {
    background-position: 0 -144px;
    padding-top: 48px;
  }

  83.33333% {
    background-position: 0 -120px;
    padding-top: 72px;
  }

  86.66667% {
    background-position: 0 -96px;
    padding-top: 96px;
  }

  90% {
    background-position: 0 -72px;
    padding-top: 120px;
  }

  93.33333% {
    background-position: 0 -48px;
    padding-top: 144px;
  }

  96.66667% {
    background-position: 0 -24px;
    padding-top: 168px;
  }
}
.matrix li:nth-child(8) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(8):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(8):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 408px, #1a122f 408px, #1a122f 720px) 0 -24px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 384px;
  overflow: hidden;
  -webkit-animation: 2400ms column-8 infinite steps(1, start);
}

@-webkit-keyframes column-8 {
  0% {
    background-position: 0 -24px;
    padding-top: 384px;
  }

  3.33333% {
    background-position: 0 0px;
    padding-top: 408px;
  }

  6.66667% {
    background-position: 0 24px;
    padding-top: 432px;
  }

  10% {
    background-position: 0 48px;
    padding-top: 456px;
  }

  13.33333% {
    background-position: 0 72px;
    padding-top: 480px;
  }

  16.66667% {
    background-position: 0 96px;
    padding-top: 504px;
  }

  20% {
    background-position: 0 120px;
    padding-top: 528px;
  }

  23.33333% {
    background-position: 0 144px;
    padding-top: 552px;
  }

  26.66667% {
    background-position: 0 168px;
    padding-top: 576px;
  }

  30% {
    background-position: 0 192px;
    padding-top: 600px;
  }

  33.33333% {
    background-position: 0 216px;
    padding-top: 624px;
  }

  36.66667% {
    background-position: 0 240px;
    padding-top: 648px;
  }

  40% {
    background-position: 0 264px;
    padding-top: 672px;
  }

  43.33333% {
    background-position: 0 288px;
    padding-top: 696px;
  }

  46.66667% {
    background-position: 0 -408px;
    padding-top: 0px;
  }

  50% {
    background-position: 0 -384px;
    padding-top: 24px;
  }

  53.33333% {
    background-position: 0 -360px;
    padding-top: 48px;
  }

  56.66667% {
    background-position: 0 -336px;
    padding-top: 72px;
  }

  60% {
    background-position: 0 -312px;
    padding-top: 96px;
  }

  63.33333% {
    background-position: 0 -288px;
    padding-top: 120px;
  }

  66.66667% {
    background-position: 0 -264px;
    padding-top: 144px;
  }

  70% {
    background-position: 0 -240px;
    padding-top: 168px;
  }

  73.33333% {
    background-position: 0 -216px;
    padding-top: 192px;
  }

  76.66667% {
    background-position: 0 -192px;
    padding-top: 216px;
  }

  80% {
    background-position: 0 -168px;
    padding-top: 240px;
  }

  83.33333% {
    background-position: 0 -144px;
    padding-top: 264px;
  }

  86.66667% {
    background-position: 0 -120px;
    padding-top: 288px;
  }

  90% {
    background-position: 0 -96px;
    padding-top: 312px;
  }

  93.33333% {
    background-position: 0 -72px;
    padding-top: 336px;
  }

  96.66667% {
    background-position: 0 -48px;
    padding-top: 360px;
  }
}
.matrix li:nth-child(9) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(9):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(9):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 456px, #1a122f 456px, #1a122f 720px) 0 -216px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 240px;
  overflow: hidden;
  -webkit-animation: 2400ms column-9 infinite steps(1, start);
}

@-webkit-keyframes column-9 {
  0% {
    background-position: 0 -216px;
    padding-top: 240px;
  }

  3.33333% {
    background-position: 0 -192px;
    padding-top: 264px;
  }

  6.66667% {
    background-position: 0 -168px;
    padding-top: 288px;
  }

  10% {
    background-position: 0 -144px;
    padding-top: 312px;
  }

  13.33333% {
    background-position: 0 -120px;
    padding-top: 336px;
  }

  16.66667% {
    background-position: 0 -96px;
    padding-top: 360px;
  }

  20% {
    background-position: 0 -72px;
    padding-top: 384px;
  }

  23.33333% {
    background-position: 0 -48px;
    padding-top: 408px;
  }

  26.66667% {
    background-position: 0 -24px;
    padding-top: 432px;
  }

  30% {
    background-position: 0 0px;
    padding-top: 456px;
  }

  33.33333% {
    background-position: 0 24px;
    padding-top: 480px;
  }

  36.66667% {
    background-position: 0 48px;
    padding-top: 504px;
  }

  40% {
    background-position: 0 72px;
    padding-top: 528px;
  }

  43.33333% {
    background-position: 0 96px;
    padding-top: 552px;
  }

  46.66667% {
    background-position: 0 120px;
    padding-top: 576px;
  }

  50% {
    background-position: 0 144px;
    padding-top: 600px;
  }

  53.33333% {
    background-position: 0 168px;
    padding-top: 624px;
  }

  56.66667% {
    background-position: 0 192px;
    padding-top: 648px;
  }

  60% {
    background-position: 0 216px;
    padding-top: 672px;
  }

  63.33333% {
    background-position: 0 240px;
    padding-top: 696px;
  }

  66.66667% {
    background-position: 0 -456px;
    padding-top: 0px;
  }

  70% {
    background-position: 0 -432px;
    padding-top: 24px;
  }

  73.33333% {
    background-position: 0 -408px;
    padding-top: 48px;
  }

  76.66667% {
    background-position: 0 -384px;
    padding-top: 72px;
  }

  80% {
    background-position: 0 -360px;
    padding-top: 96px;
  }

  83.33333% {
    background-position: 0 -336px;
    padding-top: 120px;
  }

  86.66667% {
    background-position: 0 -312px;
    padding-top: 144px;
  }

  90% {
    background-position: 0 -288px;
    padding-top: 168px;
  }

  93.33333% {
    background-position: 0 -264px;
    padding-top: 192px;
  }

  96.66667% {
    background-position: 0 -240px;
    padding-top: 216px;
  }
}
.matrix li:nth-child(10) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(10):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(10):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 96px, #1a122f 96px, #1a122f 720px) 0 576px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 672px;
  overflow: hidden;
  -webkit-animation: 2400ms column-10 infinite steps(1, start);
}

@-webkit-keyframes column-10 {
  0% {
    background-position: 0 576px;
    padding-top: 672px;
  }

  3.33333% {
    background-position: 0 600px;
    padding-top: 696px;
  }

  6.66667% {
    background-position: 0 -96px;
    padding-top: 0px;
  }

  10% {
    background-position: 0 -72px;
    padding-top: 24px;
  }

  13.33333% {
    background-position: 0 -48px;
    padding-top: 48px;
  }

  16.66667% {
    background-position: 0 -24px;
    padding-top: 72px;
  }

  20% {
    background-position: 0 0px;
    padding-top: 96px;
  }

  23.33333% {
    background-position: 0 24px;
    padding-top: 120px;
  }

  26.66667% {
    background-position: 0 48px;
    padding-top: 144px;
  }

  30% {
    background-position: 0 72px;
    padding-top: 168px;
  }

  33.33333% {
    background-position: 0 96px;
    padding-top: 192px;
  }

  36.66667% {
    background-position: 0 120px;
    padding-top: 216px;
  }

  40% {
    background-position: 0 144px;
    padding-top: 240px;
  }

  43.33333% {
    background-position: 0 168px;
    padding-top: 264px;
  }

  46.66667% {
    background-position: 0 192px;
    padding-top: 288px;
  }

  50% {
    background-position: 0 216px;
    padding-top: 312px;
  }

  53.33333% {
    background-position: 0 240px;
    padding-top: 336px;
  }

  56.66667% {
    background-position: 0 264px;
    padding-top: 360px;
  }

  60% {
    background-position: 0 288px;
    padding-top: 384px;
  }

  63.33333% {
    background-position: 0 312px;
    padding-top: 408px;
  }

  66.66667% {
    background-position: 0 336px;
    padding-top: 432px;
  }

  70% {
    background-position: 0 360px;
    padding-top: 456px;
  }

  73.33333% {
    background-position: 0 384px;
    padding-top: 480px;
  }

  76.66667% {
    background-position: 0 408px;
    padding-top: 504px;
  }

  80% {
    background-position: 0 432px;
    padding-top: 528px;
  }

  83.33333% {
    background-position: 0 456px;
    padding-top: 552px;
  }

  86.66667% {
    background-position: 0 480px;
    padding-top: 576px;
  }

  90% {
    background-position: 0 504px;
    padding-top: 600px;
  }

  93.33333% {
    background-position: 0 528px;
    padding-top: 624px;
  }

  96.66667% {
    background-position: 0 552px;
    padding-top: 648px;
  }
}
.matrix li:nth-child(11) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(11):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(11):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 240px, #1a122f 240px, #1a122f 720px) 0 120px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 360px;
  overflow: hidden;
  -webkit-animation: 2400ms column-11 infinite steps(1, start);
}

@-webkit-keyframes column-11 {
  0% {
    background-position: 0 120px;
    padding-top: 360px;
  }

  3.33333% {
    background-position: 0 144px;
    padding-top: 384px;
  }

  6.66667% {
    background-position: 0 168px;
    padding-top: 408px;
  }

  10% {
    background-position: 0 192px;
    padding-top: 432px;
  }

  13.33333% {
    background-position: 0 216px;
    padding-top: 456px;
  }

  16.66667% {
    background-position: 0 240px;
    padding-top: 480px;
  }

  20% {
    background-position: 0 264px;
    padding-top: 504px;
  }

  23.33333% {
    background-position: 0 288px;
    padding-top: 528px;
  }

  26.66667% {
    background-position: 0 312px;
    padding-top: 552px;
  }

  30% {
    background-position: 0 336px;
    padding-top: 576px;
  }

  33.33333% {
    background-position: 0 360px;
    padding-top: 600px;
  }

  36.66667% {
    background-position: 0 384px;
    padding-top: 624px;
  }

  40% {
    background-position: 0 408px;
    padding-top: 648px;
  }

  43.33333% {
    background-position: 0 432px;
    padding-top: 672px;
  }

  46.66667% {
    background-position: 0 456px;
    padding-top: 696px;
  }

  50% {
    background-position: 0 -240px;
    padding-top: 0px;
  }

  53.33333% {
    background-position: 0 -216px;
    padding-top: 24px;
  }

  56.66667% {
    background-position: 0 -192px;
    padding-top: 48px;
  }

  60% {
    background-position: 0 -168px;
    padding-top: 72px;
  }

  63.33333% {
    background-position: 0 -144px;
    padding-top: 96px;
  }

  66.66667% {
    background-position: 0 -120px;
    padding-top: 120px;
  }

  70% {
    background-position: 0 -96px;
    padding-top: 144px;
  }

  73.33333% {
    background-position: 0 -72px;
    padding-top: 168px;
  }

  76.66667% {
    background-position: 0 -48px;
    padding-top: 192px;
  }

  80% {
    background-position: 0 -24px;
    padding-top: 216px;
  }

  83.33333% {
    background-position: 0 0px;
    padding-top: 240px;
  }

  86.66667% {
    background-position: 0 24px;
    padding-top: 264px;
  }

  90% {
    background-position: 0 48px;
    padding-top: 288px;
  }

  93.33333% {
    background-position: 0 72px;
    padding-top: 312px;
  }

  96.66667% {
    background-position: 0 96px;
    padding-top: 336px;
  }
}
.matrix li:nth-child(12) {
  position: relative;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}
.matrix li:nth-child(12):before {
  display: block;
  width: 8em;
  content: "SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf SassConf";
}
.matrix li:nth-child(12):after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: linear-gradient(#1a122f 0%, rgba(26, 18, 47, 0) 456px, #1a122f 456px, #1a122f 720px) 0 -144px repeat;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: white;
  content: "SassConf";
  padding-top: 312px;
  overflow: hidden;
  -webkit-animation: 2400ms column-12 infinite steps(1, start);
}

@-webkit-keyframes column-12 {
  0% {
    background-position: 0 -144px;
    padding-top: 312px;
  }

  3.33333% {
    background-position: 0 -120px;
    padding-top: 336px;
  }

  6.66667% {
    background-position: 0 -96px;
    padding-top: 360px;
  }

  10% {
    background-position: 0 -72px;
    padding-top: 384px;
  }

  13.33333% {
    background-position: 0 -48px;
    padding-top: 408px;
  }

  16.66667% {
    background-position: 0 -24px;
    padding-top: 432px;
  }

  20% {
    background-position: 0 0px;
    padding-top: 456px;
  }

  23.33333% {
    background-position: 0 24px;
    padding-top: 480px;
  }

  26.66667% {
    background-position: 0 48px;
    padding-top: 504px;
  }

  30% {
    background-position: 0 72px;
    padding-top: 528px;
  }

  33.33333% {
    background-position: 0 96px;
    padding-top: 552px;
  }

  36.66667% {
    background-position: 0 120px;
    padding-top: 576px;
  }

  40% {
    background-position: 0 144px;
    padding-top: 600px;
  }

  43.33333% {
    background-position: 0 168px;
    padding-top: 624px;
  }

  46.66667% {
    background-position: 0 192px;
    padding-top: 648px;
  }

  50% {
    background-position: 0 216px;
    padding-top: 672px;
  }

  53.33333% {
    background-position: 0 240px;
    padding-top: 696px;
  }

  56.66667% {
    background-position: 0 -456px;
    padding-top: 0px;
  }

  60% {
    background-position: 0 -432px;
    padding-top: 24px;
  }

  63.33333% {
    background-position: 0 -408px;
    padding-top: 48px;
  }

  66.66667% {
    background-position: 0 -384px;
    padding-top: 72px;
  }

  70% {
    background-position: 0 -360px;
    padding-top: 96px;
  }

  73.33333% {
    background-position: 0 -336px;
    padding-top: 120px;
  }

  76.66667% {
    background-position: 0 -312px;
    padding-top: 144px;
  }

  80% {
    background-position: 0 -288px;
    padding-top: 168px;
  }

  83.33333% {
    background-position: 0 -264px;
    padding-top: 192px;
  }

  86.66667% {
    background-position: 0 -240px;
    padding-top: 216px;
  }

  90% {
    background-position: 0 -216px;
    padding-top: 240px;
  }

  93.33333% {
    background-position: 0 -192px;
    padding-top: 264px;
  }

  96.66667% {
    background-position: 0 -168px;
    padding-top: 288px;
  }
}

SassMeister-rendered.html

<ul class='matrix'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>