BLOODPEOPLE

by trentHarlem

HTML

<article id="blood" class="people">
    <h1 id="string"></h1>

    
    
    <!-- <div class="people">B L O O D P E O P L E</div>   -->
    <!-- <div id="breathe" class="people nine" >B L O O D P E O P L E</div>  -->
    <div id="lungs" class="people nine" >
    <span class="breathe thin">B </span>
    <span class="breathe thin">L </span> 
    <span class="breathe thin">O </span> 
    <span class="breathe thin">O </span> 
    <span class="breathe thin">D </span> 
    <span class="breathe thin">P </span> 
    <span class="breathe thin">E </span> 
    <span class="breathe thin">O </span> 
    <span class="breathe thin">P </span> 
    <span class="breathe thin">L </span> 
    <span class="breathe thin">E </span> </div> 
    <div class="people nine" >B L O O D P E O P L</div>  
    <div class="people eight">B L O O D P E O P</div>  
    <div class="people seven">B L O O D P E O</div>  
    <div class="people six">B L O O D P E</div>  
    <div class="people five">B L O O D P</div>  
    <div class="people four">B L O O D</div>  
    <div class="people three">B L O O</div>  
    <div class="people two">B L O</div>  
    <div class="people one">B L</div>  
    <div class="people one">B</div>
  </article>

CSS

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@100;300;400;500;600;700;800;900&display=swap');

*{
background-color: black;
font-size: 48px;
font-family: 'Big Shoulders Inline Text', helvetica, sans-serif;
color: whitesmoke;
}

.one {
  font-weight: 100;
}
.two {
  font-weight: 200;
}
.three {
  font-weight: 300;
}
.four {
  font-weight: 400;
}
.five {
  font-weight: 500;
}
.six {
  font-weight: 600;
}
.seven {
  font-weight: 700;
}
.eight {
  font-weight: 800;
}
.nine {
  font-weight: 900;
}

.thin {
  animation: thin 4s ease-in infinite alternate-reverse;
}

@keyframes thin {
	0% { font-weight: 900; }
  10% { font-weight: 900; }
  20% { font-weight: 800; }
  30% { font-weight: 700; }
  40% { font-weight: 600; }
  50% { font-weight: 500; }
  60% { font-weight: 400; }
  70% { font-weight: 300; }
  80% { font-weight: 200; }
  90% { font-weight: 100; }
  100% { font-weight: 100; }
}

.breathe {
  display: inline-flex;
  animation: breathe 4s ease-in infinite alternate;
  animation-fill-mode: forwards;
}

@keyframes breathe {
	0% { width: 27px; }
	100%{ width: 6vw; }
}