House of Cards flag animation

House-of-Cards-flag-animation.markdown

House of Cards flag animation

After binging on the third season of house of cards, I decided to animate the house of cards flag/logo.

A Pen by José Carneiro on CodePen.

License.

index.jade

.flag
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .stripe
  .block
  

style.less

@grey: #202020;
@white: #fff;
@red: #801929;
@blue: #1D3F5A;

@speed: 6s;

// SIZES

@lg: 22em;
@sh: 13em;
@he: 1em;
@bl: 7em;

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: @grey;
  font-size: 3vw;
}

.flag {
  position: absolute;
  top: 50%;
  left: 50%;
  width: @lg;
  transform: translateX(-50%) translateY(-50%);
}

.stripe {
  width: @lg;
  height: @he;
  background-color: @red;
  transform-origin: left;
  animation: animation @speed infinite;
  &:nth-child(even) {
    background-color: @white;
  }
  &:nth-child(n+7) {
    width: @sh;
  }
  .loop(13, 0.1s);
}

.block {
  position: absolute;
  top: 6 * @he;
  left: @sh;
  width: @lg - @sh;
  height: @bl;
  background-color: @blue;
  transform-origin: left;
  animation: animation @speed infinite;
  animation-delay: -5.5s;
}



.loop(@n, @d, @i: 1) when (@i =< @n) {
  &:nth-child(@{i}) {
    animation-delay: -1 * (@n - @i ) * @d;
  }
  .loop(@n, @d, @i + 1);
}

@keyframes animation {
  0%   {
    transform: scaleX(0);
    transform-origin: left;
  }
  5%   {
    transform: scaleX(0);
    transform-origin: left;
  }
  30% {
    transform: scaleX(1);
    transform-origin: left;
  }
  30.5% {
    transform-origin: right;
  }
  70% {
    transform: scaleX(1);
    transform-origin: right;
  }
  95% {
    transform: scaleX(0);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}