有没有一种方法可以使 html/css 中出现的文本具有动画效果？

Question

我正在尝试为 css 中缓慢出现的文本制作动画，但我无法使其流畅...它由 3 个单词组成，第一个单词会很流畅，但接下来的 2 个单词只是突然出现。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Not really my first website</title>
</head>
<body>
    <h1 class="header">Marginalized Speeding Tickets</h1>
    <div class="newclass"></div>
</body>
</html>

.header{
  width: 100%;
  top: 50%;
  position: top;
  left: 40%;
  border-bottom: 5px solid greenyellow;
  overflow: hidden;
  animation: animate 2s linear forwards;
}
.header h1 {
  color: green;
}
@keyframes animate {
  0% { 
    width: 0px;
    height: 0px;
  }
  20% {
    width: 50px;
    height: 0px;
  }
  50% {
    width: 50px;
    height: 80px;
  }
}```

Answer 1

如果我理解正确那是因为你在关键帧中使用了 50px 宽度并且它只能出现在第一个单词你可以改变它

Answer 2

关键帧不需要高度，问题是h1是一个块元素，因为宽度0px它打断了文字，但是如果你输入一个white-space: nowrap;应该没问题，也position: top; 无效，不确定您在那里尝试的是什么。 PS 我希望 h1 为绿色，首先是元素，然后是 class 选择器 h1.header {color: green;}

.header {
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 5px solid greenyellow;
  animation: animate 2s linear forwards;
}
h1.header {
  color: green;
}
@keyframes animate {
  0% { 
    width: 0px;
  }
  100% {
    width: 100%;
  }
}

<h1 class="header">Marginalized Speeding Tickets</h1>
<div class="newclass"></div>

有没有一种方法可以使 html/css 中出现的文本具有动画效果？

Is there a way to animate appearing text in html/css?

html

css

animation