Day 2.5 Keyframes

day-2-5-keyframes.markdown

Day 2.5 Keyframes

A Pen by Acampbell on CodePen.

License.

index.html

<h1><span>K</span><span>e</span><span>y</span><span>f</span><span>r</span><span>a</span><span>m</span><span>e</span><span>s</span></h1>

style.scss

// colors
$charcoal: #222831;
$darkblue: #393e46;
$lightblue: #00adb5;
$lightwhite: #eeeeee;
$yellow: #e8f044;

body{
  animation: dark 3s infinite;
  font-family: 'Pacifico', cursive;
  // color: $lightwhite;
  color: #d6d6d6;
  // background-color: $charcoal;
  h1{
    margin-top: 80px;
    text-align: center;
    font-size:7rem;
    padding: 10px;
    span{
      &:nth-of-type(1){
        animation: changecolor 4s infinite;
      }
      &:nth-of-type(2){
        animation: changecolor 4s infinite;
        animation-delay: 0.2s;
        // color: $charcoal;
        // text-shadow: 5px 5px 2px #FA057E;
      }
      &:nth-of-type(3){
        animation: changecolor 4s infinite;
        animation-delay: 0.4s;
        // color: $charcoal;
        // text-shadow: 5px 5px 2px #FA057E;
      }
      &:nth-of-type(4){
        animation: changecolor 4s infinite;
        animation-delay: 0.6s;
      }
      &:nth-of-type(5){
        animation: changecolor 4s infinite;
        animation-delay: 0.8s;
      }
      &:nth-of-type(6){
        animation: changecolor 4s infinite;
        animation-delay: 1s;
      }
      &:nth-of-type(7){
        animation: changecolor 4s infinite;
        animation-delay: 1.2s;
      }
      &:nth-of-type(8){
        animation: changecolor 4s infinite;
        animation-delay: 1.4s;
      }
      &:nth-of-type(9){
        animation: changecolor 4s infinite;
        animation-delay: 1.6s;
      }
    }
  }

}

@keyframes changecolor{
  25%{
    // text-shadow: 5px 4px 2px #ff5722;
    text-shadow: 5px 4px 2px $lightblue;
  }
  75%{
    color: #efefef;
    // text-shadow: 5px 4px 2px #dd2c00;
    text-shadow: 5px 4px 2px $darkblue;
  }
}