Fading out a span with css animations leaves space

Question

I want to animate some text, that is located in the middle of more text. Everything works almost fine, except the faded out span leaves additional space in it's place that looks kinda ugly. Setting in the "faded out" part of the animation display: none or width: 0 doesn't help

Edit: I feel obligated to point out after the first answer: the spans are there for additional styling reasons, it's just that additional fluff is removed to simplify the example. Also, there are no spaces in the animated part so you can see that space I don't need more clearly to avoid confusion. In real life everything is more complex and nice-looking.

After I posted the question I found some exhaustive info on the problem in HTML: How do I remove the space between inline-block elements? or off-site.

Unfortunately, my problem is, I'm in React. Nominally it solves that by itself, as I've found out here: Remove space between inline-block elements in React

But it seems I've caught some weird bug with that darn whitespace behaving inconsistently (see snippet for example). I guess I'll have to go to React to report it.

const MyComponent = () => {
    return (<div>      
      <span>Static text</span>
      <span className="animation">Word</span>
      <span>More static text</span>          
      <br />
      <span>Static text</span>
      <span className="animation">Several Words</span>
      <span>More static text</span>          
    </div>
    );
}
    
  ReactDOM.render(<MyComponent />, document.getElementById('root'));

.animation {
    animation: animation 7s linear infinite both;
}

@keyframes animation {
    0%,
    40%,
    100% {
        letter-spacing: initial;
        display: initial;
        opacity: 1;
    }

    50%,
    90% {
        letter-spacing: -0.5em;
        display: none;
        opacity: 0;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

*First of all, my spans are inline, not inline-block* --> both are the same — Temani Afif, Aug 09 '19 at 08:28

inputforcolor · Answer 1 · 2019-08-09T03:53:29.137

I played around with this for a bit and came up with this solution _

Adding an extra class .negateMargin to the animated text +   in front of the phrase 'Animated text'

It looks as though this shaved off the "kinda ugly" extra white-space _

CSS

.animate {
    animation: animate 7s linear infinite both;
}

.negateMargin { margin-left: -4px;}

@keyframes animate {
    0%,
    40%,
    100% {
        letter-spacing: initial;        
        opacity: 1;
    }

    50%,
    90% {
        letter-spacing: -0.5em;        
        opacity: 0;
    }
}

HTML

<span>Static text </span>
<span class="animate negateMargin">&nbsp;Animated text</span>
<span>More static text</span>

.animate {
    animation: animate 7s linear infinite both;
}

.negateMargin { margin-left: -4px;}

@keyframes animate {
    0%,
    40%,
    100% {
        letter-spacing: initial;        
        opacity: 1;
    }

    50%,
    90% {
        letter-spacing: -0.5em;        
        opacity: 0;
    }
}

<span>Static text </span>
<span class="animate negateMargin">&nbsp;Animated text</span>
<span>More static text</span>

seow · Answer 2 · 2019-08-09T03:09:57.027

0

Kindly modify your code to:

<p>
Static text <span class="animate">Animated text </span>More static text
</p>

OR

<span>Static text </span>
<span class="animate">Animated text </span>
<span>More static text</span>

edited Aug 09 '19 at 03:09

answered Aug 09 '19 at 03:07

seow

81
7

This is a simplified version. The additional spans are there for coloring – Misamoto Aug 09 '19 at 03:08
Hi, I have updated the answer. You can still use `` for different text, but please pay attention for the word spacing for each ``. – seow Aug 09 '19 at 03:14

score 0 · Accepted Answer · answered Aug 16 '19 at 18:01

Turns out, the issues I'm mentioning in the question aren't at fault here, it just looks like they are. The actual problem is with letter-spacing that the animation sets, and the 0 opacity just makes it look like it's whitespace. Here is a demo with higher opacity so you can see what's happening:

.styled {
  letter-spacing: -0.5em;
  opacity: 0.1;
}

<span>Static span</span><span class="styled">WWWWW</span><span>Static span</span>
<br/>
<span>Static span</span><span class="styled">iiii</span><span>Static span</span>

Setting the letter-spacing to -1em solves the issue, but I'll have to fiddle around with the animation so it looks as nice as it was.

Fading out a span with css animations leaves space

3 Answers3