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

I'm trying to animate slowly appearing text in css and I can't make it fluid... It consists of 3 words and will smoothly do the first word, but the next 2 words just pop into existence.

This is my code:

<!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 >Marginalized Speeding Tickets</h1>
    <div ></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;
  }
}```

CodePudding user response：

No need for height in the keyframe, the problem is that the h1 is a block element and it breaks the words because of width 0px, but if you put in a white-space: nowrap; it should be fine, also position: top; is not valid, not sure what your trying there. PS i you want he h1 to be green, first the element then the class selector 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 >Marginalized Speeding Tickets</h1>
<div ></div>

CodePudding user response：

If I get your means correctly It's because you have use 50px width in your key frame and it can only appear first word you can change that