Animated Letters Glitching CSS

Question

I've recently coded a paragraph with spans inside to animate each letter. So the animation works but when you hover over the letter it starts glitching on top. I thought that a parent element would solve it but I don't know how to set it into the p parent. Here's the code:

  span {
            top: 0;
            transition:  top 0.1s ease-in;
            position: relative;
        }

        span:hover {
            color: orange;
            top: -10px;
        }

<p>
        <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
    </p>

That's what `transition: top 0.1s ease-in;` is supposed to do, and if the character loses hovering, then it goes down to its original place. — Teemu, Feb 18 '21 at 11:47
[Stop using `top` to animate.](https://css-tricks.com/tale-of-animation-performance/) — evolutionxbox, Feb 18 '21 at 11:47
https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Re9iNee, Feb 18 '21 at 11:49
its not glitching the animation will go on till you hover over them, make transition time longer and hover with each letter, no glitching will occur. — Re9iNee, Feb 18 '21 at 11:51

Lakshya Thakur · Answer 1 · 2021-02-18T12:22:37.577

Cause of issue - As soon as you hover over span it slides up but then it's not under your mouse cursor anymore so it falls back and again is under mouse cursor and goes up..... this continues.

You can try an extra layer of span with a class like faux and a wrapper div with display:flex so that when we hover over this faux element, only then the child span element which is relatively positioned moves up. So now your trigger is the faux element for the transition and not the span element itself that had to move.

I chose span element to be my faux element. You can try variations using div also if needed.

.faux>span{
            top: 0;
            transition:  top 0.1s ease-in;
            position: relative;

}
        .faux:hover>span {
            color: orange;
            top: -10px;
        }
        
        .container{
        display:flex}

<p>

<div class='container'>
       <span class ='faux'>
        <span>H</span>
        </span>
        <span class ='faux'>
        <span>e</span>
        </span>
        <span class ='faux'>
        <span>l</span>
        </span>
        <span class ='faux'>
        <span>l</span>
        </span>
        <span class ='faux'>
        <span>o</span>
        </span>
        </div>
        
    </p>

score 0 · Accepted Answer · answered Feb 18 '21 at 12:15

The 'glitching' is caused by the user's cursor going out of hover as soon as the character moves up, then it falls back into the cursor and so you get the hover action again and so on.

Try making the spans into inline-block divs and giving them a bit of height and a transparent background so the user's cursor remains inside the element when it hovers.

 div {
            top: 0;
            transition:  top 0.1s ease-in;
            position: relative;
            background-color: transparent;
            width: auto;
            height: 2em;
            display: inline-block;
        }

        div:hover {
            color: orange;
            top: -10px;
        }

        <div>H</div><div>e</div><div>l</div><div>l</div><div>o</div>

Note, I am unsure about the validity of inline-block within a p tag - and my code missed out the p tag. Can someone enlighten me? I thought because they were inline they would be OK, but I'm not sure. If it is invalid then the p elements may have to become styled divs. — A Haworth, Feb 18 '21 at 12:28
No, this is fine. `p` containing `span` is fine from the HTML perspective; and what _formatting_ applies later on, is not relevant in terms of the allowed nesting in HTML. — CBroe, Feb 18 '21 at 12:55

Animated Letters Glitching CSS

2 Answers2