<div id="franzFerdinand">
  <div class="franz">
    <h2 v-for="(item, index) in franz" :style="{'letter-spacing':(1/(index))+'px','font-size':(38+(index*2))+'px',right:(index)+'px',bottom:(index*5)+'px','text-shadow': '2px 2px 2px #'+item}">franz</h2>
  </div>
  <div class="ferdinand">
    <h2 v-for="(item, index) in ferdinand" :style="{'letter-spacing':(1/(index))+'px','font-size':(38+(index*2))+'px',right:(index)+'px', bottom:(index*6)+'px','text-shadow': '2px 2px 2px #'+item}">ferdinand</h2>  
  </div>
</div>
    

body{
  background-color:#000;
 
  #franzFerdinand{
    font-family: 'Fredoka One', cursive;
    padding-top:40vh;
    .franz,
    .ferdinand{
      position:relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width:100%;
      height:20vh;
      h2{
        width:100%;
        text-transform:uppercase;
        text-align:center;
        position:absolute;
        opacity:0;
        transform-origin: bottom right;
        animation: lighton .4s infinite alternate;
      }
    }
  }
 }

@keyframes lighton{
  0%,100%{
    opacity:0;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
  30%,80%{
    opacity:1;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
}

@-webkit-keyframes lighton{
  0%,100%{
    opacity:0;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
  30%,80%{
    opacity:1;
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
}

@for $i from 0 to 12 {
  #franzFerdinand h2:nth-child(#{$i}) { animation-delay: $i*.10s !important;}
}

new Vue({
  el:'#franzFerdinand',
  data:{
    franz:['ff6b08','FF781E','FF8534','FF934B','FFA061','FFAE78','FFBB8E','FFC9A5','FFD6BB','FFE4D2','FFF1E8'],
    ferdinand:['EF0891','F01E9B','F134A5','F34BAF','F461B9','F678C3','F78ECD','F9A5D7','FABBE1','FCD2EB','FDE8F5']
  }
});