how make it different animation for letters?

[manuel_songokuh]

hi

i wish to use in WWB: animation for each letter (but different animation)..
see this code html:
<quadro>
<principale>O<span>rientamento</span>P<span>rofessionale</span>E<span>mpowerment</span>N<span>ews</span></principale>
</quadro>

file css:
@keyframes shrinkHide {
0% {
opacity: .5;
width: 172px;
}
20% {
width: 186px;
}
100% {
opacity: 0;
width: 0;
}
}

principale {
font-size:2rem;
color:#00b3ff;
font-weight:600;
letter-spacing:-.025em;
line-height:1.2;
font-family:Bellota;
margin:0 0 24px
}
quadro {
font-family:sans-serif;
padding-bottom:16px;
text-align:center
}
quadro principale span {
animation:shrinkHide 4s cubic-bezier(.175,.885,.32,1.275) 2s forwards;
display:inline-block;
font-weight:300;
opacity:.5
}

but i wish convert in WWB original with STYLE or CSS ANIMATION MANAGER, but is impossible, because
<span> </span> has not this in wwb different..

there is idea for trick ?

[Pablo]

Maybe this will be useful?
https://www.wysiwygwebbuilder.com/animate_text.html

[manuel_songokuh]

not good.. see my page:
https://open.enslazio.it/manuel/4/page1.html

[Pablo]

For that, you will need a custom script.

[BaconFries]

Maybe the following script will be of interest...Note some knowledge of HTML/jQuery is needed to implement into WWB.
https://textillate.js.org/

[manuel_songokuh]

I used script html but I wish try in wwb original, then wwb cannot do it, I'm right?

[Pablo]

There is no standard solution for this, so you will needs custom script.