如何修复 "slide-in" cssanimation 以使其正常工作 #intro？

Question

我正在构建我的第一个 website.The 滑入和滑下动画正常工作，直到我将导航栏 (nav-bar) 位置固定然后动画被破坏我修复了向下滑动.welcome-text 的动画，但可以修复#intro 的滑入式动画。我希望滑入式动画滑入时不会扭曲其他页面 - 这是下面的代码；

    //HTML 

        '''<!DOCTYPE html>
        <html lang="en">

        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Deborah Palm Tree</title>
        <link rel="stylesheet" href="profile.css">
        <link rel="stylesheet" href="work.css">
        <link rel="stylesheet" href="about.css">

        </head>
        <section class="Home" id="#Home">

        <nav class="nav-bar" id="#nav-bar">
            <ul>
                <li><a href="#Home">Home </a></li>
                <li><a href="#Work">Work</a></li>
                <li><a href="#About">About </a></li>
            </ul>
        </nav>

        <body>

            <section id="#Home">
                    <h1 class="welcome-text"> Welcome to my page! </h1>
                <div id="intro" class="page-intro">

                    <a name="Home">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A modi veniam 
        repellendus nesciunt
                            nemoquam Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas 
        mollitia placeat
                            perspiciatis
                            expedita! Explicabo hic expedita soluta eos ullam. Incidunt vitae 
        laboriosam temporibus iusto
                            iste maiores dolorum soluta, ipsa minus optio repudiandae adipisci aut 
        deserunt vel atque
                            deleniti facere, sint, quas earum a. Ipsum neque, explicabo fuga, expedita 
        error sequi ratione
                            atque et fugit adipisci harum ad dolorum! Deleniti similique, reiciendis 
        ipsam blanditiis a
                            neque, iste obcaecati, soluta eveniet nostrum praesentium porro culpa 
        asperiores quisquam unde
                            sapiente ad dolorum architecto voluptatum? Officia nihil saepe iste 
        excepturi distinctio
                            exercitationem veniam, voluptates laudantium repellendus, eligendi omnis 
        molestiae impedit
                            necessitatibus incidunt consectetur debitis quisquam assumenda deleniti 
         quam molestias nemo.
                            Perspiciatis aperiam sit fugit provident mollitia. Nostrum, fuga quaerat praesentium excepturi
                            iste impedit consectetur architecto odio blanditiis ducimus aliquid sit! Doloremque, obcaecati
                            laudantium, quia alias repellendus quos suscipit, modi corporis quidem corrupti incidunt
                            consequatur laborum necessitatibus eaque perspiciatis quod repudiandae qui! Deserunt, quo error
                            dolor provident ipsum nostrum dolore nihil veritatis ad quibusdam ducimus suscipit doloremque
                            neque incidunt nisi temporibus. Atque ipsa labore magni, exercitationem, laudantium nostrum

                            Officiis deserunt qu quaera dicta eaque vitae, nulla doloribus minima praesentium aliquid
                            nesciunt. Cumque rem
                            aspernatur id repellat s placeat corrupti eum eos quidem aliquid. Hic numquam quos sequi est
                            dignissimos magnam
                            voluptatibus maiores excepturi ratione reiciendis quia fugiat ipsa voluptatem nobis accusamus
                            sint asperiores neque,
                            animi nemo eminus sapiente! Culpa temporibus illum ullam rem quae aspernatur doloribus ut
                            voluptatum nihil
                            quo laborum, a provident. Iste ratione inventore saepe architecto recusandae.
                        </p>
                    </a>
                    <a href="" class="btn"> EXPLORE </a>
                </div>
                </section>


        <section class="Work" id="#Work">
        <h2 class="h2-Work"> WORK </h2>
        <a name="Work">
            <p class="p-Work">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
                cupiditate aliquid tempore, suipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.

                debitis numquam cum odio dicta ducimus pariatur ullam! Nesciunt facere reprehenderit cupiditate aperiam
                repudiandae autem blanditiis magni ea, odit molestiae quo ad vero ratione cumque beatae voluptatem porro
                ipsum, ducimus dignissimos eaque quibusdam quod. Velit facilis ipsum, harum amet quaerat perferendis
                suscipit officiis recusandae voluptatibus cum numquam quisquam alias? Vero deserunt commodi ea dolores. Fuga
                debitis inventore temporibus harum porro! Atque maxime iste hic aperiam sunt reprehenderit, dignissimos
                dolorem perferendis possimus exercitationem iure commodi modi repellendus at esse labore magnam quia
                quibusdam maiores, quaerat nesciunt nobis! Eius saepe, quo itaque rem quia quae sequi tempora, ratione
                eveniet, possimus sunt! Tempore nemo, quia reprehenderit dolorum totam quae? Magnam non ratione esse,
                laudantium ducimus ullam officiis! In placeat ut libero rem consectetur dolorem ullam consequatur suscipit
                amet sunt voluptas, harum dolorum quaerat similique, perspiciatis, ratione officia id obcaecati ipsa
                perferendis repellendus. Explicabo animi repellat a vel in, doloremque eum officiis reiciendis ipsam quis
                deleniti assumenda quibusdam fuga recusandae impedit asperiores eos cum aperiam labore vero molestiae? Odio
                aut laboriosam perspiciatis aspernatur blanditiis excepturi provident consectetur beatae.
                perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias voluptate est iste
                reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium,
                suscipit Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ullam ducimus velit quisquam
                provident. Saepe, dolores suscipit harum adipisci dicta obcaecati officiis voluptatibus, cupiditate iure
                nostrum, nemo voluptatem facere cum. Exercitationem ipsam ab est et porro, debitis, sapiente nam recusandae,
                illo delectus ea. Consequuntur provident exercitationem dolore numquam repellendus nam voluptas at modi
                repellat non dolores nemo laborum molestiae aliquid eaque, similique id voluptate. Omnis unde est saepe
                asperiores, delectus ipsum dolore. Dicta repellat odit, debitis temporibus incidunt omnis saepe ipsam
                consequuntur obcaecati, sit laudantium ratione. Sapiente, reiciendis cumque, exercitationem voluptates,
                alias fuga enim consequuntur dolorem consequatur repudiandae modi? Quibusdam.
                temporibus vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
            </p>
        </a>
        </section>

        <section class="About" id="#About">
        <h3 class="h3-About"> ABOUT </h3>
        <a name="About">
            <p class="p-About">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam nobis ex veritatis nostrum harum sit,
                cupiditate aliquid tempore, suscipit neque eveniet quisquam sed, ratione blanditiis eaque nemo quibusdam.
                Soluta Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam repudiandae minima architecto quibusdam
                dolore optio nihil assumenda, laboriosam facilis repellat totam dolorem impedit mollitia at nisi a ipsum
                aliquam explicabo. perferendis neque minima a labore excepturi recusandae earum ut alias, culpa molestias
                voluptate est iste
                reiciendis! Velit, debitis quasi sit commodi dicta sunt, minus vel modi dolores repellat laudantium, Lorem
                ipsum dolor sit amet consectetur, adipisicing elit. Minima aliquam eligendi culpa, fugit non voluptatem quia
                aspernatur optio assumenda dignissimos excepturi, expedita cum voluptates error omnis earum praesentium quas
                quidem ipsam doloribus. Beatae, quos. Quam, maxime itaque tenetur repudiandae modi libero nihil nemo qui
                temporibus sed impedit minima doloremque earum excepturi accusamus culpa vel sit natus dolor velit, hic,
                sapiente ea ut quae. In placeat velit excepturi iste temporibus, illum dignissimos optio repellat totam
                asperiores animi voluptatem illo voluptas, odit et molestias pariatur quas! Impedit aut odio similique
          vero ducimus reprehenderit quod labore tempora tenetur provident perferendis cumque.
            </p>
        </a>

        </section>


        <section class="footer" id="#footer">
        <footer>
            &copy Website designed by Deborah Palm Tree.
        </footer>
        </section>

        </body>

        </html> '''



//CSS -The HTML has 3 nav-bar items I set the nav-bar position to fixed and its top to 
zero to ensure the nav-bar is static as I scroll down the page this affected the slide-

首页动画

    ''' * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: black;
        text-align: center;
    }

    .page-intro {
        max-width: 960px;
        margin: auto;
        padding: 0 30px;
    }

    .welcome-text {
        height: 80px;
    }

    nav.nav-bar {
        position: fixed;
        top: 0;
        background-color: darkolivegreen;
        min-width: 100%;
        height: 8vh;
    }

    nav li {
        display: inline-block;
        margin-right: 5%;
    }

    nav ul {
        list-style: none;
        display: flex;
        justify-content: flex-end;
    }

    nav li a {
        text-decoration: none;
        color: whitesmoke;
    }

    h1,
    .page-intro {
        color: whitesmoke;
    }

    h1.welcome-text {
        font-size: 50px;
        line-height: 1.3;
        animation: slide-down 3s forwards;
    }

    .h2-Work,.h3-About{
        font-size: 25px;
        color: antiquewhite;
        text-align: center;
        padding: 30px 30px 0px 30px;
    }

    @keyframes slide-down {
        0% {
            margin-top: -20px;
        }

        100% {
            margin-top: 80px;
        }
    }

    #intro {
        animation: slide-in 3s forwards;
    }

    @keyframes slide-in {
        0% {
            margin-left: -50%;

        }

        100% {
            margin: 0;

        }
    }



    .btn {
        display: inline-block;
        color: #fff;
        text-decoration: none;
        padding: 1rem 2rem;
        border: #fff 1px solid;
        margin-top: 40px;
        opacity: 0;
        animation: btn 3s 3s forwards;
        transition: transform 1s;
    }

    .btn:hover {
        transform: rotateY(180deg);
    }

    @keyframes btn {
        0% {
            bottom: 10%;
            opacity: 0;
        }

        100% {
            bottom: 5%;
            opacity: 1;
        }
    }


    .p-Work {
        color: antiquewhite;
        text-align: center;
    }

    .p-About {
        color: antiquewhite;
        text-align: center;
    }

    .footer {
        color: antiquewhite;
        background-color: cadetblue;
        min-width: 100%;
    }'''

Answer 1

#intro {
    animation: slide-in 3s forwards;
    transform: translate(-50%);
    position: relative;
    left: 50%;
}



position: relative;

这允许元素保持其大小与父元素一致，即它是相对于其 perant 的框模型

left: 50%;

这是将元素的位置居中但是

transform: translate(-50%);

默认情况下，所有元素的中心点都在页面的左上角，这意味着您需要将其移动到中心，这就是转换翻译发挥作用的地方

希望对您有所帮助

Answer 2

基于以上内容，您只需保留我在上面的回答中所做的更改，并添加导航栏以进行修复：

nav.nav-bar {
        position: fixed; (<<<< the nav bar will stay at the top of the page)
        top: 0;
        background-color: darkolivegreen;
        min-width: 100%;
        height: 8vh;
        z-index: 5; (<<<<<< the content goes under the nav)
}

Z-index 是元素的位置，如果一个 z-index 高于另一个元素，那么它会出现在元素的前面（这只适用于定位元素 - 所以它会在位置设置时起作用固定）

更多信息在这里：

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

对于第 3 点）介绍文本应从左侧滑入 - 从我可以看到和编辑的代码来看，目前这样做是正确的：

#intro {
    animation: slide-in 3s forwards;
    transform: translate(-50%);
    position: relative;
    left: 50%;
}

如果这里有问题请告诉我:)

如何修复 "slide-in" cssanimation 以使其正常工作 #intro？

How can I fix the "slide-in" cssanimation to work properly of #intro?

html

css

nav

navbar

css-animations