<h3 class="heading-10"><span>H</span><span>E</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span><span>1</span><span>0</span></h3>
h3.heading-10
- for (var x = 0; x < text.length; x++)
//- span(class=`-${ x }`) #{ text[x] }
span #{ text[x] }
{
"text": "HEADING10"
}
$BLOCK_NAME: '.heading-10';
// 変数
#{ $BLOCK_NAME } {
font-weight: bold;
font-size: 24px;
> span {
will-change: color;
animation: colorChange 0.3s 2;
@for $i from 0 through 20 {
&:nth-child(#{$i}) {
animation-delay: 0.04s * $i;
}
}
}
}
@keyframes colorChange {
0% {
color: #001136;
}
25% {
color: #005bb3;
}
50% {
color: #d10c22;
}
75% {
color: #f21e36;
}
100% {
color: #003466;
}
}