Fast Spin!!!

fast-spin.markdown

Fast Spin!!!

CSS animation of the rotateY transform function and the hue-rotate filter.

by CurleyWebDev

License.

index.html

<div class="container text-center text-uppercase">
 <p>c</p>
 <p>u</p>
 <p>r</p>
 <p>l</p>
 <p>e</p>
 <p>y</p>
 <p>w</p>
 <p>e</p>
 <p>b</p>
 <p>d</p>
 <p>e</p>
 <p>v</p>
</div>

style.css

body{
  background: black;
  text-align:center;
   text-transform:uppercase;
   font-family:arial;
   font-weight:900;
    font-size:4em;
   letter-spacing:-5px ;
}
.container{
  
}
p{
  opacity:0;
  margin-top:300px;
  display:inline-block;
  background:linear-gradient(cyan 30%, black 50%, magenta 70%, cyan 99%);
  color:transparent;
  -webkit-background-clip:text;
  -webkit-text-stroke:2px magenta;
  filter:drop-shadow(3px 1px 1px white);

}

.container p:nth-child(1){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1s, color-shift 500ms ease-in-out forwards 4s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(2){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1.25s, color-shift 500ms ease-in-out forwards 4.25s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(3){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1.5s, color-shift 500ms ease-in-out forwards 4.5s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(4){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 1.75s, color-shift 500ms ease-in-out forwards 4.75s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(5){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2s, color-shift 500ms ease-in-out forwards 5s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(6){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2.25s, color-shift 500ms ease-in-out forwards 5.25s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(7){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2.5s, color-shift 500ms ease-in-out forwards 5.5s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(8){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 2.75s, color-shift 500ms ease-in-out forwards 5.75s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(9){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3s, color-shift 500ms ease-in-out forwards 6s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(10){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3.25s, color-shift 500ms ease-in-out forwards 6.25s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(11){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3.5s, color-shift 500ms ease-in-out forwards 6.5s, spin-out 500ms ease-in-out forwards 8s;
}
.container p:nth-child(12){
animation:bg-shift 2s linear infinite, spin-in 500ms ease-in-out forwards 3.75s, color-shift 500ms ease-in-out forwards 6.75s, spin-out 500ms ease-in-out forwards 8s;
}



@keyframes bg-shift{
  from{
    background-position:500px 200px;
  }
  to{
    background-position:500px -200px;
  }
  
}

@keyframes spin-in{
  0%{
    opacity:1;
    transform:rotatey(90deg);
     filter:blur(20px)drop-shadow(3px 1px 1px white);
  }
  50%{
    transform:rotatey(-3600deg);
    filter:blur(0)drop-shadow(3px 1px 1px white);
  }
  100%{
    opacity:1;
    transform:rotatey(0);
    
  }
}

@keyframes color-shift{
  from{
    filter:hue-rotate(0)drop-shadow(3px 1px 1px white);
   border:3px solid cyan;
  }
  to{
    filter:hue-rotate(90deg)drop-shadow(3px 1px 1px white);
    
  }
  
}

@keyframes spin-out{
  0%{
    opacity:1;
    transform:rotatey(0);
     
  }
  50%{
    transform:rotatey(-3600deg);
    filter:blur(0)drop-shadow(3px 1px 1px white);
  }
  100%{
    opacity:1;
    transform:rotatey(90deg);
    filter:blur(20px)drop-shadow(3px 1px 1px white);
    
  }
}