81 lines
2.4 KiB
SCSS
81 lines
2.4 KiB
SCSS
#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;
|
|
}
|
|
} |