Можно ли анимировать first-letter?

Question

Написал простую анимацию для первой букву, а она не работает. Возможно есть решения данной проблемы

@keyframes backgrund {
  from {
    background-position: 0 0%;
  }
  to {
    background-position: 0 -200px;
  }
}
h1:first-letter {

  background: -webkit-linear-gradient(transparent, transparent), url(http://xn--80aeil2bh1a.xn--p1ai/wp-content/uploads/2020/04/C4B1CADB-B6D8-48B5-877C-8F4AFBDA22B0.jpeg) repeat;
  background-size: 200px auto;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: backgrund 10s infinite linear;
}

Answer 1

Похоже, что это свойство, разработчики временно (или навсегда) подзабиыли. Очень капризная и малофункциональная штука, с ограниченным набором применимых свойств, и потому, редкоиспользуемая.

В CSS3 возможен "грязный хак", но это "на любителя" (комментарии в коде):

h1 {
  background-image: url(http://xn--80aeil2bh1a.xn--p1ai/wp-content/uploads/2020/04/C4B1CADB-B6D8-48B5-877C-8F4AFBDA22B0.jpeg);
  background-size: 200px auto;
  background-repeat: repeat;
  background-position: 0 0%;
  animation: backgrund 2s infinite ease-in-out;
  -webkit-background-clip: text;
  /* Так как текст вырезается с 
     помощью прозрачности, то...*/
  -webkit-text-fill-color: transparent;
  /* Цвет текста, вместо "color"... */
  /* color: red; */
  /* ... определяем цветом тени */
  text-shadow: 0px 0px .5px red;
}

h1::first-letter {
  font-size: 96px;
  /* Тут цвет тени прозрачный */
  text-shadow: 0px 0px 0px transparent;
}

@keyframes backgrund {
  50% { background-position: 0 -200px; }
}

<h1>h1::first-letter</h1>

БЛОГ НА HUSL

Можно ли анимировать first-letter?

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