CSS动画-设置响应动画的持续时间

我正在尝试学习CSS动画，但有一件事我无法理解，也无法在网上找到，那就是如何设置合适的持续时间

我试图让我的网站响应，因此字体大小将根据视图的大小而变化。到目前为止，我有以下代码：

@media screen { 
.EntranceDiv{
    top: 40%;
    position: relative;
}

h1 {
    font-size: 4rem;
    margin: 0px;
}

.helloworld{
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid #D9FAFF; /* 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: .8em;
    display: inline-block;
    animation: 
    typing initial steps(30, end),
    blink-caret .5s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #D9FAFF }
  }
@keyframes typing {
    from { width: 0 }
    to { width: 65% }
  }
}

---

我的问题是，随着字体大小的变化，动画要么太长，要么太短，然后整个东西就在屏幕上弹出。设置响应动画的持续时间的好方法是什么？这里的主要问题是，您设置的宽度是相对于父容器的，因此它与

内联块

元素的内容没有关系。您需要找到一种方法来正确设置元素的宽度

由于无法转换到

width:auto

，因此我复制了内容，并使用具有绝对位置的伪元素。第一个内容将定义宽度并将隐藏，第二个内容将可见，我可以使用左/右属性拉伸以适应定义的宽度：

h1{
字号：4rem；
边际：0px；
}
.helloworld{
字母间距：.8em；
显示：内联块；
位置：相对位置；
可见性：隐藏；
空白：nowrap；
}
.helloworld:之后{
内容：attr（数据内容）；
显示：块；
能见度：可见；
溢出：隐藏；
空白：nowrap；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：100%；
右边框：15em实心#D9FAFF；
动画：向前键入2s步（30，结束），闪烁插入符号。5s步结束无限；
}
@关键帧闪烁插入符号{
从…起
到{
边框颜色：透明
}
50% {
边框颜色：#D9FAFF
}
}
@关键帧键入{
从{
右：100%
}
到{
右：0%
}
}
}

洛勒姆
洛尔
洛雷姆·伊普苏姆

所以没有纯粹的CSS方法可以做到这一点？@Temaniaf如果我猜JS方法也更简单，但却无法达到目的：D我试图使用纯CSSso让我们等等，也许有人会有一个聪明的主意；）我不确定我是否理解这个问题，是因为文本是有响应的，所以基于宽度（键入）的动画太长还是太短？啊，我猜我也理解错了！它的持续时间几乎相同，取决于宽度，对吗？