CSS Animation: Order Property

css-animation-order-property.markdown

CSS Animation: Order Property

This CSS animation uses the "order" property. In order to use this property, you must give the "display" property a value of "flex".

License.

index.html

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

style.css

@import url('https://fonts.googleapis.com/css?family=Orbitron:400,900&display=swap');
:root{
   --drop:drop 500ms ease-in-out forwards ;
   --text:1s ease-in-out forwards 1s;
   --order:5s ease-in-out forwards 3s;
   --dark:dark 250ms forwards;
}
body{
   background:black;
   width:100vw;
}
.cwd{
   display:flex;
   filter:brightness(125%);
}
p{
   color:#121212;
   margin-top:300px;
   font-size:4.1em;
   letter-spacing:-3px;
   font-family: 'Orbitron', sans-serif;
   -webkit-text-stroke:1px gray;
 
}
p:nth-child(1){
   -webkit-order:10;
   animation:var(--drop),red var(--text),reorder-1 var(--order), var(--dark) 8s;
}
p:nth-child(2){
   -webkit-order:8;
   animation:var(--drop),red var(--text),reorder-2 var(--order), var(--dark)8s;
}
p:nth-child(3){
   -webkit-order:3;
   animation:var(--drop),red var(--text),reorder-3 var(--order), var(--dark)8s;
}
p:nth-child(4){
   -webkit-order:2;
   animation:var(--drop),red var(--text),reorder-4 var(--order), var(--dark)8s;
}
p:nth-child(5){
   -webkit-order:7;
   animation:var(--drop),red var(--text),reorder-5 var(--order), var(--dark)8s;
}
p:nth-child(6){
   -webkit-order:12;
   animation:var(--drop),red var(--text),reorder-6 var(--order), var(--dark)8s;
}
p:nth-child(7){
   -webkit-order:6;
   animation:var(--drop),blue var(--text),reorder-7 var(--order), var(--dark) 9s;
}
p:nth-child(8){
   -webkit-order:11;
   animation:var(--drop),blue var(--text),reorder-8 var(--order), var(--dark) 9s;
}
p:nth-child(9){
   -webkit-order:4;
   animation:var(--drop),blue var(--text),reorder-9 var(--order), var(--dark) 9s;
}
p:nth-child(10){
   -webkit-order:5;
   animation:var(--drop),green var(--text),reorder-10 var(--order), var(--dark) 10s;
}
p:nth-child(11){
   -webkit-order:1;
   animation:var(--drop),green var(--text),reorder-11 var(--order), var(--dark) 10s;
}
p:nth-child(12){
   -webkit-order:9;
   animation:var(--drop),green var(--text),reorder-12 var(--order), var(--dark) 10s;
}
@keyframes drop{
   0%{
      transform:translatey(-500px);
   }
   80%{
      transform:translatey(0);
   }
   90%{
      transform:translatey(-40px);
   }
   100%{
      transform:translatey(0);
   }
}
@keyframes red{
   100%{
      color:pink;
      text-shadow:0 0 white, 0 0 7px red, 0 0 20px red;
      filter:drop-shadow(0 0 25px red);
   }
}
@keyframes blue{
   100%{
      color:skyblue;
      text-shadow:0 0 white, 0 0 7px blue, 0 0 20px blue;
      filter:drop-shadow(0 0 25px blue);
   }
}
@keyframes green{
   100%{
      color:lightgreen;
      text-shadow:0 0 white, 0 0 7px lime, 0 0 20px lime;
      filter:drop-shadow(0 0 25px lime);
   }
}
@keyframes reorder-1{
   to{
      order:1;
   }
}
@keyframes reorder-2{
   to{
      order:2;
   }
}
@keyframes reorder-3{
   to{
      order:3;
   }
}
@keyframes reorder-4{
   to{
      order:4;
   }
}
@keyframes reorder-5{
   to{
      order:5;
   }
}
@keyframes reorder-6{
   to{
      order:6;
   }
}
@keyframes reorder-7{
   to{
      order:7;
   }
}
@keyframes reorder-8{
   to{
      order:8;
   }
}
@keyframes reorder-9{
   to{
      order:9;
   }
}
@keyframes reorder-10{
   to{
      order:10;
   }
}
@keyframes reorder-11{
   to{
      order:11;
   }
}
@keyframes reorder-12{
   to{
      order:12;
   }
}
@keyframes dark{
   100%{
      color:black;
      text-shadow:0 0 0 black;
      filter:drop-shadow(0 0 0 black);
      -webkit-text-stroke:black;
   }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />