我正在建立我的第一个网站。滑入式和滑入式动画均正常工作，直到将导航栏（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,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,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>
© 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%;
}'''