CSS text hover animation trick

Today, I found an interesting CSS animation at 『天久鷹央の推理カルテ』TVアニメ公式サイト drawer menu, which animate letter by letter when hovering the words.

<a href="#introduction" class="l-nav__link">
  <span class="l-nav__link-txt">
    <span class="u-color-red">I</span>
    <span>N</span>
    <span>T</span>
    <span>R</span>
    <span>O</span>
    <span>D</span>
    <span>U</span>
    <span>C</span>
    <span>T</span>
    <span>I</span>
    <span>O</span>
    <span>N</span>
  </span>
</a>

.l-nav__link-txt span {
  display: inline-block;
  vertical-align: baseline;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.l-nav__link-txt span:nth-child(1) {
  transition-delay: 0s;
}
.l-nav__link-txt span:nth-child(2) {
  transition-delay: 0.05s;
}
/* ... */
.l-nav__link-txt span:nth-child(19) {
  transition-delay: 0.9s;
}
.l-nav__link-txt span:nth-child(20) {
  transition-delay: 0.95s;
}
@media (hover: hover) {
  .l-nav__link:hover .l-nav__link-txt span {
    transform: rotateY(360deg);
  }
}

Well, it turns out, they hardcoding :nth-child in CSS because CSS does not support getting the index from variable.

So, I modify and recreate it with calc() function support which is based on A nth-child CSS trick by Kevin Pennekamp

INTRODUCTION

<span class="text">
  <span>I</span>
  <span>N</span>
  <span>T</span>
  <span>R</span>
  <span>O</span>
  <span>D</span>
  <span>U</span>
  <span>C</span>
  <span>T</span>
  <span>I</span>
  <span>O</span>
  <span>N</span>
</span>

:nth-child(1) {
    --index: 1;
}
:nth-child(2) {
    --index: 2;
}
/* ... */
:nth-child(11) {
    --index: 11;
}
:nth-child(12) {
    --index: 12;
}

span.text > span {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: calc(0.05s * (var(--index) - 1));
}
span.text:hover > span {
    transform: rotateY(360deg);
}