CSS Flag - Animation Created By Amit Sheen

This post describes CSS Flag animation by Amit Sheen flies the Awesome flag made of many, many flapping divs in this CSS animation.

CSS Flag By Codepen:

See the Pen CSS Flag by Amit Sheen (@amit_sheen) on CodePen.

In HTML:

<div class="flag">
  <div class="flap">
    <div class="flap">
      <div class="flap">
        <div class="flap">
          <div class="flap">
            <div class="flap">
              <div class="flap">
                <div class="flap">
                  <div class="flap">
                    <div class="flap">
                      <div class="flap">
                        <div class="flap">
                          <div class="flap">
                            <div class="flap">
                              <div class="flap">
                                <div class="flap">
                                  <div class="content"></div>
                                </div>
                                <div class="content"></div>
                              </div>
                              <div class="content"></div>
                            </div>
                            <div class="content"></div>
                          </div>
                          <div class="content"></div>
                        </div>
                        <div class="content"></div>
                      </div>
                      <div class="content"></div>
                    </div>
                    <div class="content"></div>
                  </div>
                  <div class="content"></div>
                </div>
                <div class="content"></div>
              </div>
              <div class="content"></div>
            </div>
            <div class="content"></div>
          </div>
          <div class="content"></div>
        </div>
        <div class="content"></div>
      </div>
      <div class="content"></div>
    </div>
    <div class="content"></div>
  </div>
  <div class="pole"></div>
</div>

In CSS:

@import url('https://fonts.googleapis.com/css2?family=Orelega+One&display=swap');

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

$speed: 3s;

body {
  font-family: 'Orelega One', cursive;
  background-image: linear-gradient(#ccc, #999);
  color: #fffc;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  perspective: 20em;
}

.flag {
  position: relative;
  width: 0; height: 16em;
  background-color: #fff;
  transform: translateX(-6em) rotateX(-30deg) rotateY(15deg);
  transform-style: preserve-3d;
}

.flap {
  position: absolute;
  top: 0; left: calc(100% - 1px);
  width: calc(1em + 1px); height: 9em;
  box-shadow: 0px 0px 1em #0003 inset;
  transform-style: preserve-3d;
  transform-origin: left;
  animation: flap $speed infinite ease-in-out;

  $s: '&';
  @for $i from 0 to 16 {
    #{$s} {
      animation-delay: $speed / 16 * $i * -2;
      background-image: linear-gradient(90deg, hsl(120 + 10 * $i, 50%, 35%), hsl(120 + 10 * ($i + 1), 50%, 35%));
      --v: #{$i * 2.5}deg;
      & .content::before {
        left: #{$i * -0.25}em;
      }
      & .content::after {
        left: #{$i * -0.5}em;
      }
    }
    $s: $s + ' > .flap';
  }

  &::after {
    content: '';
    position: absolute;
    top: 16em; left: 50%;
    width: 200%; height: 1em;
    background-color: #999;
    transform: translate(-50%, -50%) rotateX(90deg);
    border-radius: 0.5em;
    filter: blur(0.6em);
  }
}

.content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  transform: translateZ(0.5px);
  text-shadow: 0 0 0.5em #000;

  &::before {
    content: 'CSS';
    position: absolute;
    bottom: 40%; left: 0;
    width: 4em;
    text-align: center;
    font-size: 4em;
  }

  &::after {
    content: 'is awesome';
    position: absolute;
    top: 50%; left: 0;
    width: 8em;
    text-align: center;
    font-size: 2em;
    white-space: pre;
    line-height: 0.8;
    animation: afterText $speed * 2.2 infinite step-end;

    @keyframes afterText {
      0% { content: 'is awesome'; }
      50% { content: 'is better \a with animations'; }
    }
  }
}

@keyframes flap {
  0%, 100% { transform: rotateY(calc(var(--v) * -1)); }
  50% { transform: rotateY(var(--v)); }
}

.pole {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1em; height: 100%;
  border-radius: 0 0 0.5em 0.5em / 0 0 0.3em 0.3em;
  background-image:
    linear-gradient(#7777, #6660, #555),
    linear-gradient(90deg, #777, #fff, #555);

  &::before {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    width: 4em; height: 4em;
    transform: translate(-50%, -50%) rotateX(90deg);
    background-image: radial-gradient(#0004, #0000 60%);
  }
  &::after {
    content: '';
    position: absolute;
    top: 0%; left: 50%;
    width: 1em; height: 0.4em;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle at top, #aaa, #333);
  }
}