求助：实现文字从基线向上抬升的CSS+Anime.js动画效果

Got it, let's tweak this animation so your text rises from the baseline instead of the bottom of the container block. The issue with your current code is that the line-height on the .letter elements is much larger than the actual text height, combined with a fixed translateY(100px) offset—this makes the animation look like it's coming from the block's bottom instead of the text's baseline.

Here's the adjusted solution with clear explanations:

Modified Code #

HTML

<div class="wrap">
  <h1 class="ml16"><span>Made with love for a testing purpose</span></h1>
</div>

CSS

.wrap {
  width: 700px;
  margin: 100px auto;
}

.ml16 {
  color: #402d2d;
  padding: 40px 0;
  font-weight: 800;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  overflow: hidden;
  font-family: sans-serif;
}

.ml16 .letter {
  display: inline-block;
  line-height: 1em; /* Match container height to actual text size */
  vertical-align: baseline; /* Lock alignment to text's natural baseline */
}

JavaScript

// Wrap every letter in a span
$('.ml16').each(function() {
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({ loop: true })
  .add({
    targets: '.ml16 .letter',
    translateY: ['0.4em', 0], /* Start just below baseline, move to original position */
    easing: "easeOutExpo",
    duration: 1400,
    delay: function(el, i) {
      return 30 * i;
    }
  }).add({
    targets: '.ml16',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Key Changes Explained #

• line-height: 1em on .letter: This shrinks each letter's container to match the actual text height, so the animation's starting point isn't pulled down by the oversized block line height.
• translateY: ['0.4em', 0]: Using a relative em unit instead of fixed pixels ensures the animation starts just below the text baseline (where descenders like 'g' or 'y' sit). You can tweak the 0.4em value slightly depending on your font—smaller values make the starting position closer to the baseline, larger values make it lower.
• vertical-align: baseline: Guarantees each letter stays aligned to the text's natural baseline throughout the animation, preventing any unexpected shifting.

This setup will make your text appear to rise up from its natural baseline position, exactly what you're aiming for!

内容的提问来源于stack exchange，提问作者Mohammed Wahed Khan