Trying to get text to move in a wave, but it's not working

Asked Aug 26 '20 at 11:52

Active Aug 26 '20 at 11:54

Viewed 10 times

I'm trying to get text that says "Hey there!" to move in a sort of wavy fashion, similar to what you might see in an RPG. Here's the css I'm working with:

.wiggly span {
    font-family: 'Montserrat', sans-serif;
    font-size: 90px;
    font-weight: bold;
    -webkit-animation: wiggle 1.5s ease-in-out infinite;
    -webkit-animation-delay: calc(0.1s * var(--i));
}
@-webkit-keyframes wiggle {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-10px);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(10px);
    }

    80% {
        transform: translateY(-10px);
    }
}

<div class="wiggly">
            <span style="--i:1;">H</span>
            <span style="--i:2;">e</span>
            <span style="--i:3;">y</span>
            <span style="--i:4;">&nbsp;</span>
            <span style="--i:5;">t</span>
            <span style="--i:6;">h</span>
            <span style="--i:7;">e</span>
            <span style="--i:8;">r</span>
            <span style="--i:9;">e</span>
            <span style="--i:10;">!</span>
        </div>

I adapted my code off of this code example and this youtube video. Any idea where I'm going wrong? Thanks!

edited Aug 26 '20 at 11:54

Temani Afif

245,468
26
309
415

asked Aug 26 '20 at 11:52

Vanram

display:inline-block to span element – Temani Afif Aug 26 '20 at 11:55
and you can remove the webkit prefixes, it's no more needed – Temani Afif Aug 26 '20 at 11:55
It worked, thank you!! Why is it that it has to be displayed as inline-block to work? – Vanram Aug 26 '20 at 11:57
read the duplicate for more details – Temani Afif Aug 26 '20 at 11:58
Will do, thanks again! – Vanram Aug 26 '20 at 11:59

Trying to get text to move in a wave, but it's not working

0 Answers0