Как остановить перемещение текста после завершения анимации? - PullRequest
Новая
       10

Как остановить перемещение текста после завершения анимации?

0 голосов
/ 03 мая 2019

Я создаю свой веб-сайт и думаю, что анимация раскрытия текста будет крутой.Анимация раскрытия текста работает, но текст непреднамеренно скользит вправо после того, как текст был раскрыт.Любая идея для исправления этого?

Я сделал Code Pen здесь: 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>

1 Ответ

0 голосов
/ 04 мая 2019

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>
...