我有这个动画，我想自动调整它的大小以适应内容。标题总是随着白天和用户的变化而变化，我想避免标题容器使用 100% 的可用空间来进行进一步的动画。
对于所有自动属性，标题只会在 2.5 秒后弹出。
那么我该如何处理这个问题呢？
.typewriter {
overflow: hidden;
white-space: nowrap;
animation: animated-text 2.5s steps(30,end) 1s 1 normal both;
}
@keyframes animated-text {
from {
width: 0;
}
to {
width: fit-content;
}
}
<h1 class="typewriter">Hello Admin</h1>
您可以通过父元素上的网格来解决此问题。我们创建两列，其中一列带有auto（它会一直缩小）第二个有1fr。在动画中，将值的宽度从适合内容 to 100%.
body {
display: grid;
grid-template-columns: auto 1fr;
}
.typewriter {
grid-column: 1;
overflow: hidden;
white-space: nowrap;
transition: all 0.3s;
animation: animated-text 2.5s steps(30, end) 1s 1 normal both;
border: 1px solid red;
}
@keyframes animated-text {
from {
width: 0;
}
to {
width: 100%;
}
}
<h1 class="typewriter">Hello Admin</h1>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
