Не работает sibling-index()

Question

Пробую оптимизировать анимацию с помощью sibling-index(), но почему-то индекс подставляется только первый. Нужно, чтобы в формулу calc((-16% * sibling-index()) - 16%); последовательно подставлялся индекс(от 1 до 6) и анимация менялась как в закомментированном участке кода.

body {
    font-family: sans-serif;
}
h2 {
    display: flex;
}
.wrapLetter {
    overflow: hidden;
    width: 78px;
    height: 100px;
}

span.slicedText {
    display: inline-block;
    position: relative;
    font-size: 128px;
    letter-spacing: 30px;
    left: 5px;
    top: -25px;
}

.wrapLetter .slicedText{ 
    animation: slideLetter 5s cubic-bezier(.07,.86,.18,.96);
}

/* .wrapLetter:nth-child(1) .slicedText { 
    --final-pos: 0%;
}

.wrapLetter:nth-child(2) .slicedText { 
    --final-pos: -16%;
}

.wrapLetter:nth-child(3) .slicedText { 
    --final-pos: -32%;
}

.wrapLetter:nth-child(4) .slicedText { 
    --final-pos: -48%;
}

.wrapLetter:nth-child(5) .slicedText { 
    --final-pos: -64%;
}

.wrapLetter:nth-child(6) .slicedText { 
    --final-pos: -80%;
} */

.wrapLetter .slicedText{ 
    --final-pos: calc((-16% * sibling-index()) - 16%);
}

@keyframes slideLetter {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(var(--final-pos, 0%));
    }
    100% {
        transform: translateX(0%);
    }
}

<h2>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
</h2>

Answer 1

Не знаю, что конечно изменилось в анимации, но переменную скорее нужно задавать для .wrapLetter, при .wrapLetter .slicedText - sibling-index() всегда будет 1 ибо .slicedText единственный ребенок.

body {
    font-family: sans-serif;
}
h2 {
    display: flex;
}
.wrapLetter {
    overflow: hidden;
    width: 78px;
    height: 100px;
}

span.slicedText {
    display: inline-block;
    position: relative;
    font-size: 128px;
    letter-spacing: 30px;
    left: 5px;
    top: -25px;
}

.wrapLetter .slicedText{ 
    animation: slideLetter 5s cubic-bezier(.07,.86,.18,.96);
}

/* .wrapLetter:nth-child(1) .slicedText { 
    --final-pos: 0%;
}

.wrapLetter:nth-child(2) .slicedText { 
    --final-pos: -32%;
}

.wrapLetter:nth-child(3) .slicedText { 
    --final-pos: -32%;
}

.wrapLetter:nth-child(4) .slicedText { 
    --final-pos: -48%;
}

.wrapLetter:nth-child(5) .slicedText { 
    --final-pos: -64%;
}

.wrapLetter:nth-child(6) .slicedText { 
    --final-pos: -80%;
} */

.wrapLetter { 
    --final-pos: calc((-16% * sibling-index()) - 16%);
}

@keyframes slideLetter {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(var(--final-pos, 0%));
    }
    100% {
        transform: translateX(0%);
    }
}

<h2>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
   <div class="wrapLetter"><span class="slicedText">stefan</span></div>
</h2>

Answer 2

sibling-index() вычисляется для текущего элемента, однако, не учитывает псевдоэлементы. Поэтому можно перенести текст в ::before или ::after, тогда расчеты станут верными.

body {
  font-family: sans-serif;
}

h2 {
  display: flex;
}

.wrapLetter {
  overflow: hidden;
  width: 78px;
  height: 100px;
}

.wrapLetter::before {
  content: 'stefan';
  display: inline-block;
  position: relative;
  font-size: 128px;
  letter-spacing: 30px;
  left: 5px;
  top: -25px;
  --final-pos: calc((sibling-index() - 1) * -16%);
}

.wrapLetter::before {
  animation: slideLetter 5s cubic-bezier(.07, .86, .18, .96);
}


@keyframes slideLetter {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(var(--final-pos, 0%));
  }

  100% {
    transform: translateX(0%);
  }
}

<h2>
  <div class="wrapLetter"></div>
  <div class="wrapLetter"></div>
  <div class="wrapLetter"></div>
  <div class="wrapLetter"></div>
  <div class="wrapLetter"></div>
  <div class="wrapLetter"></div>
</h2>

БЛОГ НА HUSL

Не работает sibling-index()

Ответы (2 шт):