how make it different animation for letters?
Posted: Fri Oct 07, 2022 10:24 am
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 ?
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 ?