CodePen Embed - Single Div Animation

div

View Compiled

// Modify to change general color theme
$backgroundColor: #1f3244;

// Modify to adjust the shadow color
$shadowColor: darken($backgroundColor, 20);

// Modify to adjust the shadow spacing
$size: 5vmin;

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: $backgroundColor;
}

div {
  position: relative;

  &::before,
  &::after {
    position: absolute;
    content: " ";
    will-change: box-shadow;
  }

  &::before {
    animation: grow1 10s linear infinite;
  }

  &::after {
    animation: grow2 10s linear infinite;
  }
}

/**====== Shadow Animation Keyframing ======**/

@keyframes grow1 {
  0% {
    box-shadow: 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04);
  }

  10% {
    box-shadow: 0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0);
  }

  20% {
    box-shadow: 0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0);
  }

  30% {
    box-shadow: 0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0);
  }

  40% {
    box-shadow: 0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0),
      0 0 0 ($size * 13) rgba($shadowColor, 0);
  }

  50% {
    box-shadow: 0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0),
      0 0 0 ($size * 13) rgba($shadowColor, 0),
      0 0 0 ($size * 14) rgba($shadowColor, 0);
  }

  60% {
    box-shadow: 0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0),
      0 0 0 ($size * 13) rgba($shadowColor, 0),
      0 0 0 ($size * 14) rgba($shadowColor, 0),
      0 0 0 ($size * 15) rgba($shadowColor, 0);
  }

  70% {
    box-shadow: 0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0),
      0 0 0 ($size * 13) rgba($shadowColor, 0),
      0 0 0 ($size * 14) rgba($shadowColor, 0),
      0 0 0 ($size * 15) rgba($shadowColor, 0),
      0 0 0 ($size * 16) rgba($shadowColor, 0);
  }

  80% {
    box-shadow: 0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0),
      0 0 0 ($size * 13) rgba($shadowColor, 0),
      0 0 0 ($size * 14) rgba($shadowColor, 0),
      0 0 0 ($size * 15) rgba($shadowColor, 0),
      0 0 0 ($size * 16) rgba($shadowColor, 0),
      0 0 0 ($size * 17) rgba($shadowColor, 0);
  }

  90% {
    box-shadow: 0 0 0 ($size * 9) rgba($shadowColor, 0.04),
      0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0),
      0 0 0 ($size * 13) rgba($shadowColor, 0),
      0 0 0 ($size * 14) rgba($shadowColor, 0),
      0 0 0 ($size * 15) rgba($shadowColor, 0),
      0 0 0 ($size * 16) rgba($shadowColor, 0),
      0 0 0 ($size * 17) rgba($shadowColor, 0),
      0 0 0 ($size * 18) rgba($shadowColor, 0);
  }

  100% {
    box-shadow: 0 0 0 ($size * 10) rgba($shadowColor, 0),
      0 0 0 ($size * 11) rgba($shadowColor, 0),
      0 0 0 ($size * 12) rgba($shadowColor, 0),
      0 0 0 ($size * 13) rgba($shadowColor, 0),
      0 0 0 ($size * 14) rgba($shadowColor, 0),
      0 0 0 ($size * 15) rgba($shadowColor, 0),
      0 0 0 ($size * 16) rgba($shadowColor, 0),
      0 0 0 ($size * 17) rgba($shadowColor, 0),
      0 0 0 ($size * 18) rgba($shadowColor, 0),
      0 0 0 ($size * 19) rgba($shadowColor, 0);
  }
}

@keyframes grow2 {
  0% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0);
  }

  10% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4);
  }

  20% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36);
  }

  30% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32);
  }

  40% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28);
  }

  50% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24);
  }

  60% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2);
  }

  70% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16);
  }

  80% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0),
      0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12);
  }

  90% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0), 0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08);
  }

  100% {
    box-shadow: 0 0 0 0 rgba($shadowColor, 0.4),
      0 0 0 ($size * 1) rgba($shadowColor, 0.36),
      0 0 0 ($size * 2) rgba($shadowColor, 0.32),
      0 0 0 ($size * 3) rgba($shadowColor, 0.28),
      0 0 0 ($size * 4) rgba($shadowColor, 0.24),
      0 0 0 ($size * 5) rgba($shadowColor, 0.2),
      0 0 0 ($size * 6) rgba($shadowColor, 0.16),
      0 0 0 ($size * 7) rgba($shadowColor, 0.12),
      0 0 0 ($size * 8) rgba($shadowColor, 0.08),
      0 0 0 ($size * 9) rgba($shadowColor, 0.04);
  }
}

View Compiled

Run Pen

This Pen is owned by Eric on CodePen.

See more by @ekfuhrmann on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.