House of Cards Flag

by Blake Dietz

HTML

<!-- original  : http://codepen.io/kaibrueckers/pen/hmGBc -->
<!-- reference : http://giphy.com/gifs/house-of-cards-kevin-spacey-robin-wright-STSvhP0zFZHDq -->
<!-- reference : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations -->
<!-- reference : http://www.sitepoint.com/whats-difference-sass-scss/ -->
<div class='flag'>
  <ul>
  <!--TODO: Why was <li> chosen for this? Is it because of their display type?-->
    <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>
  <div></div>
</div>

SCSS

body
{
  display: flex;
  justify-content: center;
  align-content : center;
}

.flag
{
  width: 320px;
  height: 192px;
  
  li
  {
    width:100%;
    height:15px;
    
    &:nth-child(odd)
    {
      background: red;
    }
    &:nth-child(even)
    {
      background: white;
    }
    &:nth-child(n+7)
    {
      width: 190px;
    }
  }
  
   div {
    position: relative;
    background: #06103c;
    height: 105px;
    width: 130px;
    left: 190px;
    bottom: 105px;
  }
  
  li:nth-child(1)  { animation: fill-stripe1  3s infinite ease alternate; }
  li:nth-child(2)  { animation: fill-stripe2  3s infinite ease alternate; }
  li:nth-child(3)  { animation: fill-stripe3  3s infinite ease alternate; }
  li:nth-child(4)  { animation: fill-stripe4  3s infinite ease alternate; }
  li:nth-child(5)  { animation: fill-stripe5  3s infinite ease alternate; }
  li:nth-child(6)  { animation: fill-stripe6  3s infinite ease alternate; }
  li:nth-child(7)  { animation: fill-stripe7  3s infinite ease alternate; }
  li:nth-child(8)  { animation: fill-stripe8  3s infinite ease alternate; }
  li:nth-child(9)  { animation: fill-stripe9  3s infinite ease alternate; }
  li:nth-child(10) { animation: fill-stripe10 3s infinite ease alternate; }
  li:nth-child(11) { animation: fill-stripe11 3s infinite ease alternate; }
  li:nth-child(12) { animation: fill-stripe12 3s infinite ease alternate; }
  li:nth-child(13) { animation: fill-stripe13 3s infinite ease alternate; }
  
  div { animation: fill-blue 3s infinite ease alternate; }
}

@keyframes fill-stripe1 {
  0% { width: 0; }
  12% { width: 0; }
  40% { width: 100%; }
  90% { width: 100%; }
  100% { width: 100%; }
}

@keyframes fill-stripe2 {
  0% { width: 0; }
  14% { width: 0; }
  42% { width: 100%; }
  90% { width: 100%; }
  100% { width: 100%; }
}

@keyframes fill-stripe3 {
  0% { width: 0; }
  16% { width: 0; }
  36% { width: 100%; }
  90% { width: 100%; }
  100% { width: 100%; }
}

@keyframes fill-stripe4 {
  0% { width: 0; }
 ...