Wave Animation Pure CSS

index.pug

- var line_cube_n = 13
- var cube_n = Math.pow(line_cube_n, 2)

mixin cube()
  .cube
    - for (var i=0; i<3; i++)
      .cube__f

.scene
  .plane
    - for (var j=0; j < Math.sqrt(cube_n); j++)
      .line
        - for (var i=0; i < Math.sqrt(cube_n); i++)
          +cube
          

style.sass

@import 'compass'

$line-cube-n: 13
$cube-n: pow($line-cube-n, 2)
$cube-s: .2em
$cube-n-root: sqrt($cube-n)
$bg-color: white
$p-color: #095178
$s-color: #27485a

=center
  position: absolute
  top: 50%
  left: 50%

html, body
  height: 100%
  width: 100%
  
body
  background: $bg-color
  display: flex
  align-items: center
  justify-content: center
  
div
  transform-style: preserve-3d
  perspective: 20000px
  
  
.plane
  font-size: 60px
  position: relative
  transform: rotateX(60deg) rotateZ(45deg) rotateY(2deg)
  
  .line
    position: absolute
    height: $cube-s
    width: $cube-s * $cube-n-root
    @for $i from 0 to $cube-n-root
      &:nth-child(#{$i + 1})
        top: $cube-s * $i
        animation: anim 1s ease-in-out infinite $i * .1s
        .cube
          @for $k from 0 to $cube-n-root
            &:nth-child(#{$k + 1})
              $bg : mix($s-color, $p-color, random() * 70 * 1%)
              background: $bg
              animation: anim 1s ease-in-out infinite $k * .1s
              .cube__f
                @for $m from 0 to 3
                  &:nth-child(#{$m + 1})
                    @if $m < 1
                      background: lighten($bg, 20%)
                    @else if $m == 1
                      background: darken($bg, 10%)

    .cube
      height: $cube-s
      width: $cube-s
      position: absolute
      transition: transform .1s ease-in-out
      backface-visibility: hidden
      
      @at-root
        @keyframes anim
          0%, 100%
            transform: translateZ(0)
          50%
            transform: translateZ($cube-s/2)
      
      @for $j from 0 to $cube-n-root
        &:nth-child(#{$j + 1})
          left: $cube-s * $j
      
      &__f
        +center
        margin-top: -$cube-s/2
        margin-left: -$cube-s/2
        height: $cube-s
        width: $cube-s
        background: inherit
        
        @for $l from 0 to 3
          &:nth-child(#{$l + 1})
            transform: if($l < 2,rotateY(90 * $l * 1deg), rotateX(pow(-1, $l) * -90 * 1deg)) translateZ($cube-s / 2)

wave-animation-pure-css.markdown

Wave Animation Pure CSS

A Pen by Conner on CodePen.

License.