动画制作完成后，如何阻止文本移动？

Question

我正在构建自己的网站，并认为文字显示动画会很酷。文本显示动画的工作原理，但是文本显示后，文本无意间向右滑动。有解决办法的想法吗？

我在这里制作了密码笔：https://codepen.io/JoelEXE/pen/mYbMoX

@keyframes text-reveal {
    0%{width: 0%; margin-left: 25vw;}
    20%{width: 20%; margin-left: 25vw;}
    50%{width: 50%; margin-left: 25vw;}
    80%{width: 80%; margin-left: 25vw;}
    100%{width: 100%; margin-left: 25vw;}
}

.image-bg-section {
    width: 100%;
    height: 100vh;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    background-image: yes;
    background-attachment: fixed;
}

.reveal-heading-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    margin: 0 auto;
    overflow: hidden;
    animation: text-reveal 5s linear;
}

.image-bg-section h1 {
    font-size: 550%;
    font-family: sans-serif;
    color: black;
    margin-top: 45vh;
}

            <section class = "image-bg-section">
                <div class = "reveal-heading-container">
                    <h1>Welcome to my website</h1>
                </div>
            </section>

Answer 1

margin-left=25vw使屏幕左侧到第一个字母左侧的边距随着屏幕变大而变小。而是将其放在h1 CSS选择器中。

@keyframes text-reveal {
    0%{width: 0%;}
    20%{width: 20%;}
    50%{width: 50%;}
    80%{width: 80%;}
    100%{width: 100%;}
}

.image-bg-section {
    width: 100%;
    height: 100vh;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    background-image: yes;
    background-attachment: fixed;
}

.reveal-heading-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    margin: 0 auto;
    overflow: hidden;
    animation: text-reveal 5s linear;
}

.image-bg-section h1 {
    font-size: 550%;
    font-family: sans-serif;
    color: black;
    margin-top: 45vh;
}

            <section class = "image-bg-section">
                <div class = "reveal-heading-container">
                    <h1>Welcome to my website</h1>
                </div>
            </section>

@keyframes text-reveal {
    0%{width: 0%; margin-left: 25vw;}
    20%{width: 20%; margin-left: 25vw;}
    50%{width: 50%; margin-left: 25vw;}
    80%{width: 80%; margin-left: 25vw;}
    100%{width: 100%; margin-left: 25vw;}
}

.image-bg-section {
    width: 100%;
    height: 100vh;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    background-image: yes;
    background-attachment: fixed;
}

.reveal-heading-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    margin: 0 auto;
    overflow: hidden;
    animation: text-reveal 5s linear;
}

.image-bg-section h1 {
    font-size: 550%;
    font-family: sans-serif;
    color: black;
    margin-top: 45vh;
    margin-left:25vw;
}

            <section class = "image-bg-section">
                <div class = "reveal-heading-container">
                    <h1>Welcome to my website</h1>
                </div>
            </section>