Javascript typerwriter效果完成后如何显示按钮？

我正在尝试使用TypeWriter效果来写一行文本，然后在动画停止时显示一个按钮

styles.css：

.welcome-msg {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }


  /* The typing effect */
  @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }

  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
  }

UserMenu.tsx：

import React from "react";
import { useHistory } from "react-router-dom";
import AppBar from "../../common/AppBar";
import CssBaseline from "@material-ui/core/CssBaseline";
import './styles.css';
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";


const UserMenu = () => {
  const history = useHistory();
  const handleLogout = () => {
    history.push('/')
  }
  return (
    <div>
      <CssBaseline />
      <AppBar label="user" handleLogout={handleLogout} />
      <Grid container direction="column" alignItems="center" justify="center" style={{ height: "50vh" }}>
        <Grid item>
          <h1 className="welcome-msg">Welcome to user homepage</h1>
        </Grid>
        <Grid item>
          <Button variant="contained" color="secondary">Create</Button>
        </Grid>
      </Grid>
    </div>
  )
}
export default UserMenu;

从“React”导入React；
从“react router dom”导入{useHistory}；
从“../../common/AppBar”导入AppBar；
从“@material ui/core/CssBaseline”导入CssBaseline；
导入“./styles.css”；
从“@material ui/core/Grid”导入网格；
从“@物料界面/核心/按钮”导入按钮；
常量用户菜单=（）=>{
const history=useHistory（）；
常量handleLogout=（）=>{
history.push（“/”）
}
返回(
欢迎来到用户主页
创造
)
}
导出默认用户菜单；

---

如何解决这个问题？

我建议使用

onAnimationEnd

发件人：

CSS动画完成后，将触发animationend事件。如果 动画在完成之前中止，例如 元素从DOM中删除或动画从 元素，则不会激发animationend事件

欢迎来到用户主页

---

非常感谢您的回答。@Slim当然。我在回答的末尾添加了一个演示链接，以防你想看到它的实际应用。非常感谢。