Как сделать анимацию разъезжания текста?

Question

[godsplane]

Я сделал такое решение, но мне оно кажется перегруженным и тупым, как можно сделать нормально? https://codepen.io/poylar/pen/QWqPKBG
+ из-за кэша иногда это все багается и ширна задается на ширину окна.

Comments

[Aetae]

Думаю можешь как-то приспособить псевдоэлемент ::first-letter.

Answer 1

[twobomb]

Если можно что-то сделать не прибегая к js, лучше это так и делать. Если покалупаться можно что-то подобное сделать.

Comments

[godsplane]

только нужно чтобы сстартовала с первой буквы (чтобы сначала была видно одна буква), так что тут на css это вряд ли сделаешь

[twobomb]

godsplane, да думаю посидеть можно чёто придумать, может after, before использовать. В content подставлять букву через атрибут типа content: attr(data-word); , а в теге писать < div data-word="буква" ... Ну я думаю можно что-то придумать. Просто например лично я в вашем js примере не вижу никаких первых букв.