#usexpathssteps.future .characters .c,
// #usexpathssteps.past .characters .c
 {
    opacity:0;
}
#usexpathssteps.active .characters .c {
    transition-duration: 0s;
    transition-property:opacity;
    opacity:visible;
    opacity:1;
}

$delaymod:0.4s;
$delaybase:1s;

#usexpathssteps.active .characters .c:nth-child(1) {
    transition-delay: $delaybase+1*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(2) {
    transition-delay: $delaybase+2*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(3) {
    transition-delay: $delaybase+3*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(4) {
    transition-delay: $delaybase+4*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(5) {
    transition-delay: $delaybase+5*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(6) {
    transition-delay: $delaybase+6*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(7) {
    transition-delay: $delaybase+7*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(8) {
    transition-delay: $delaybase+8*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(9) {
    transition-delay: $delaybase+9*$delaymod;
}
#usexpathssteps.active .characters .c:nth-child(10) {
    transition-delay: $delaybase+10*$delaymod;
}

// #usexpathssteps.past .xpath span, 
#usexpathssteps.future .xpath span,
#usexpathssteps.active .xpath span {
    width:0px;
    opacity:0;
}

#usexpathssteps.active .xpath span {
    -webkit-animation-name: toggle;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    display:inline-block;
}

$xpathdelaymod:1s;
$xpathdelaybase:5s;

#usexpathssteps.active .xpath span:nth-child(1) {-webkit-animation-delay: $xpathdelaybase+1*$xpathdelaymod;}
#usexpathssteps.active .xpath span:nth-child(2) {-webkit-animation-delay: $xpathdelaybase+2*$xpathdelaymod;}
#usexpathssteps.active .xpath span:nth-child(3) {-webkit-animation-delay: $xpathdelaybase+3*$xpathdelaymod;}
#usexpathssteps.active .xpath span:nth-child(4) {-webkit-animation-delay: $xpathdelaybase+4*$xpathdelaymod;}
#usexpathssteps.active .xpath span:nth-child(5) {-webkit-animation-delay: $xpathdelaybase+5*$xpathdelaymod;}

@keyframes toggle {
     from {
            width:0px;
            opacity:0;
         }
     to {
            width:initial;
            opacity:1;
      }
 }