如何修复 #intro 的“滑入式”cssanimation 以正常工作？答案

【问题标题】：How can I fix the "slide-in" cssanimation to work properly of #intro?如何修复 #intro 的“滑入式”cssanimation 以正常工作？
【发布时间】：2019-11-17 20:20:08
【问题描述】：

我正在构建我的第一个网站。滑入和滑下动画正常工作，直到我将导航栏（导航栏）位置设置为固定然后动画被破坏我修复了 .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%;
    }'''

【问题讨论】：

标签： html css css-animations navbar nav

【解决方案1】：

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



position: relative;

这允许元素保持其大小与父元素一致，即它相对于其对应的盒子模型

left: 50%;

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

transform: translate(-50%);

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

希望对你有帮助

【讨论】：

谢谢@Wally。我尝试了上面的代码，它改变了我将导航栏定位为固定的原因 - 所以当向下滚动页面时 - 页面内容将位于导航栏上方而不是下方。
我不太确定您想要达到的最终结果是什么，请您提供更多详细信息 - thx
你好沃利，非常感谢。我试图确保：1）导航栏保持在固定位置，因此当您向下滚动时，您仍然可以看到导航栏项目（2）当向下滚动页面时，页面内容不在导航栏下方多于。 (3) #intro 页面内容从左侧滑入，其文本内容位于页面中心。
您好 Wally，谢谢您，但这也不起作用。我没有注意到您对代码所做的更改。
嗨 debs - 下面的代码应该可以工作，我认为问题是 z-index。

【解决方案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 高于另一个元素，那么它将出现在元素的前面（这仅适用于定位元素 - 所以它会在这里工作，因为位置设置为固定)

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

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

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

【讨论】：