为什么我无法使用 CSS 在动画中获得所需的输出？
Why I can't get desired output in animation using CSS?
我试图让导航栏动画响应，但在执行过程中，导航栏首先变成块元素，而不是在整个动画中保持内联块。
与其他导航栏相同，唯一的区别是第二个导航栏应从动画开始时保留块元素。
我尝试更改 nav 的显示属性，但仍然没有成功。请帮帮我。
下面给出了相同查询的代码（要忽略的代码旁边的注释）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: lightgreen;
background-color: rgb(133, 43, 43);
}
nav ul li {
display: inline-block;
margin: 1px 1px 1px 1px;
padding: 23px 24px 23px 24px;
text-decoration: none;
}
nav ul li:hover {
color: red;
cursor: pointer;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav {
margin: 1px -8px 1px -8px;
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
}
nav:hover {
background-color: rgb(26, 26, 92);
}
.nav2 ul li {
display: block;
margin: 1px 1px 1px 1px;
padding: 23px 24px 23px 24px;
text-decoration: none;
}
.nav2 {
margin: 1px -8px 1px -8px;
width: 10%;
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
top: 3px;
position: sticky;
}
/* .nav2:hover{
display: none;
} */
/* @media (min-width:0%) and (max-width:100%) {
#nav{
display: inline-block;
}
} */
@keyframes navload {
from {
width: 0%;
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente, doloremque fugit at repellendus
perferendis quos adipisci consequuntur iusto iure tempore neque aspernatur corrupti doloribus magni, error rerum
voluptate! Possimus?
</p>
<div class="nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum deserunt ducimus sequi architecto laboriosam
recusandae repellendus cupiditate soluta voluptatibus quia repudiandae fuga maxime aspernatur, sed tenetur,
aliquid omnis veniam cumque sit velit, esse sunt? Reiciendis veniam, minima repudiandae officiis tempora sit id.
Possimus dolore veniam aliquam perspiciatis ipsam odit at minus asperiores facere! Eaque quo fugit iste odit,
quaerat doloribus, commodi nobis sapiente cum et distinctio architecto consequatur ex eveniet sunt laborum!
Facere debitis quos sapiente! Quidem, vitae ex sint impedit minus possimus? Saepe eius dolore fuga veniam.
Consectetur nemo fugiat tenetur minima consequatur deserunt, quos cupiditate dolore fuga mollitia, nihil
pariatur beatae velit a enim ea voluptates blanditiis, veritatis iure sed ipsum. Praesentium dolor ducimus
voluptatum, libero laborum, distinctio odio mollitia quaerat veritatis saepe magni commodi possimus ex aliquam
unde necessitatibus tenetur aut repudiandae nam soluta! Quos, veniam perferendis. Deleniti aliquid harum fuga,
mollitia distinctio, quidem in reiciendis et odit ipsam officiis eum hic, nesciunt illum. In alias, rerum
nesciunt sapiente a ad incidunt consectetur perferendis, placeat necessitatibus doloremque magni. Odit,
distinctio animi accusamus alias, voluptatem beatae doloribus fuga voluptate esse repellat quo tenetur facere
eius laudantium aspernatur velit temporibus veritatis sequi corporis corrupti? Possimus nihil vel necessitatibus
vero consectetur eligendi voluptatem magnam alias laborum aperiam dolorum quod tenetur laudantium quas quibusdam
temporibus eos incidunt accusamus fugit earum perspiciatis consequuntur fugiat, repellat nobis? Assumenda dicta
nihil placeat quam totam ab animi consequatur cumque praesentium vel voluptate dolores incidunt modi ipsa ex
nostrum eligendi quidem labore culpa eveniet iusto, ad reiciendis ullam laudantium! Dolor voluptatibus
laboriosam alias aperiam nobis excepturi, deleniti deserunt unde! Molestias aperiam nisi esse laboriosam
voluptatum cumque, eaque harum laborum reiciendis illo sint quidem doloribus accusantium recusandae praesentium
cupiditate perferendis? Magni aspernatur fugit qui. Odit similique esse eligendi aperiam enim neque quo, aliquam
dolores ducimus, veniam ea amet explicabo reiciendis sequi minima unde iure beatae, et perferendis vel.
Doloribus labore corrupti natus fuga magni incidunt dolorum, tenetur porro, eius voluptatem dolore dolores
maxime rem ducimus nihil praesentium maiores sapiente quos, quidem eveniet repellendus! Culpa neque est odio,
cupiditate unde accusamus nulla iure! Neque accusamus quod laborum placeat non impedit architecto, laudantium
cupiditate ipsa molestiae cum magni vel deserunt nesciunt alias quidem quia numquam nihil corrupti! Fugit velit
ut maxime nihil animi facere et dolores beatae tenetur, quibusdam optio molestiae quisquam minus sequi explicabo
dolor quod a voluptate autem maiores quas totam porro. Aliquid, reiciendis. Laborum doloribus natus nesciunt
delectus iure incidunt fugiat tempore recusandae fuga omnis quod nisi commodi modi, reprehenderit exercitationem
minima reiciendis tenetur? Sapiente reiciendis id dolor. Rem quod nostrum quae quos, et optio in voluptatibus ex
quas dolor saepe obcaecati quidem ullam. Sit commodi vero aspernatur error tempora in, non vitae sapiente
assumenda perspiciatis et molestias esse accusantium deleniti minus, possimus asperiores hic quod perferendis
quasi laborum est quo. Voluptas quaerat incidunt eligendi nulla suscipit delectus ullam voluptatibus
consequuntur vel autem. Voluptatem eos quas ex perferendis, suscipit aspernatur, aut praesentium laboriosam,
facere dignissimos et corrupti cumque consectetur doloremque harum? Hic fuga dolorum explicabo quae sunt,
repellendus tempore quibusdam atque odio accusamus molestiae et deleniti eius voluptates, natus odit adipisci
architecto officiis facilis non recusandae aperiam cumque. Nobis, aut corporis. Voluptatum eaque optio labore
maiores. Facere perspiciatis, itaque est ea maxime recusandae dolor, animi nostrum id earum deleniti nemo
accusamus omnis culpa laudantium magnam sequi temporibus ratione ex repellat. Doloribus eum fugiat nesciunt,
magnam enim blanditiis earum consectetur. Nihil recusandae aperiam error saepe laborum exercitationem culpa
maiores provident laboriosam, mollitia eius ab sed at atque alias ex possimus similique labore. Quis veritatis
sunt, eligendi iure illum ex commodi voluptatem esse deleniti voluptatum impedit dolores incidunt dignissimos.
Veniam esse, recusandae molestias vitae mollitia ab officiis dolor perspiciatis commodi, assumenda maiores
accusamus ex modi? Fuga commodi illum maiores doloremque laborum ut dolore magni quibusdam vitae doloribus,
alias rerum? Velit, quo? Ut, esse quo accusantium nobis velit beatae eos dolores? Ipsa, aliquid harum laborum
in, facere perspiciatis labore magni quaerat consequatur laudantium quibusdam error reiciendis accusamus, quis
veritatis cumque dolore nulla temporibus eum. Repellendus quisquam omnis reiciendis nobis vitae nostrum tempore
aspernatur. Quibusdam ipsum illo officia nihil tempora? Ducimus laudantium, aspernatur ab velit, dolor cum alias
perferendis quidem explicabo id saepe debitis reiciendis eligendi architecto vitae! Pariatur dolor fugiat optio
nisi aut. Maxime fugit a nam tempore earum nisi incidunt. Vitae tenetur, rerum voluptatibus voluptatum deserunt
vel ratione itaque cumque facilis. Tempore, odit harum fugiat non doloribus ex totam omnis commodi aspernatur
aperiam nostrum, nisi accusantium neque assumenda. Dolores dolorum cum accusamus ipsa iusto ab voluptate
voluptatibus impedit sint voluptas, ullam ad omnis pariatur quod debitis architecto porro perspiciatis
voluptatum aspernatur est repudiandae commodi culpa. Rem distinctio ducimus iusto itaque, voluptas ratione
impedit ab aspernatur repudiandae voluptatem vitae, magni esse sit voluptatibus id assumenda non. Deleniti
beatae vel odio? Repellat itaque, aliquid omnis harum laboriosam provident ut, repellendus, sit magni ex
reiciendis accusamus? Soluta consequatur commodi iure debitis. Dolores officiis non voluptate? Ad fugiat sint
adipisci iste consectetur. Quos aliquid tenetur dicta cum temporibus eligendi dolorum dolore blanditiis rem
iusto placeat velit enim dolores dolor sequi, voluptatum ipsa architecto ex praesentium id modi molestias
molestiae beatae quaerat! Neque eligendi dolores dolorum, nihil, esse quisquam delectus libero velit omnis
laboriosam quae facere voluptatibus perferendis commodi ad sequi, perspiciatis suscipit ratione. Minus itaque
sapiente quod corporis, vero ab, enim obcaecati nulla cupiditate magni in quasi magnam nam, voluptate veniam!
Dicta enim quo temporibus provident, nobis possimus alias eveniet maxime placeat dolores libero atque sunt
molestias voluptates quibusdam harum nihil debitis suscipit repellat eligendi. Nam expedita quas, perspiciatis
labore amet voluptate, rerum similique consequuntur quod id, velit repudiandae non. Iste illum repellat maxime
tempore vel esse alias cum quidem earum iure perferendis autem voluptatem eos odit, magnam praesentium velit.
Dolore architecto perspiciatis nihil ipsam ipsa nemo ut culpa adipisci assumenda officia soluta laboriosam
possimus quae ad, illum, nesciunt deleniti aliquam voluptatem? Architecto consectetur explicabo quia quod fugit
unde quis debitis! Non minima iste consectetur! Harum qui, animi ad ducimus fugit porro voluptatum, velit
nostrum officiis laudantium dolore eligendi commodi aliquam exercitationem ratione necessitatibus ab. Neque
necessitatibus incidunt nihil! A odio obcaecati mollitia placeat, perferendis non magnam soluta molestias nobis
eaque voluptate dolores rem tempore enim alias illo quos nostrum inventore optio impedit nemo maxime aspernatur.
Quam consequuntur enim esse quo est autem doloribus corporis porro repellat vitae odio fugiat, rem dignissimos
reiciendis ad! Minima voluptas, quam odit recusandae ipsa pariatur sit consequuntur distinctio autem sint fugiat
eius reiciendis minus id voluptates adipisci, sapiente, tempore illo maiores at qui. Beatae omnis repellat nisi
aspernatur assumenda maxime, quia illum eos accusamus ex ducimus quibusdam tenetur, ipsam nobis, iusto labore
consectetur excepturi quo atque blanditiis! Excepturi quo quisquam iusto veniam. Vel ipsum, molestias quisquam
ipsam perferendis beatae libero architecto id repellendus fuga velit eius voluptatum, harum ullam facere. Iusto
est harum voluptatibus quibusdam iste magnam, cum quae a totam repellendus id aspernatur accusantium quas
tenetur aliquam quasi laboriosam nihil facilis illo laudantium corporis eum rem. Dignissimos ipsam quisquam
ipsum natus. Voluptatum repellat consequatur id rerum atque tenetur eligendi molestiae nulla aliquam vero, quas
excepturi non qui doloremque veniam quibusdam commodi iure repellendus. Beatae quia magnam modi nemo ducimus?
Delectus ex reiciendis, nulla aut laborum quam optio dolorem quaerat iste voluptates quod excepturi voluptatibus
suscipit incidunt debitis dolorum doloremque dolor perferendis commodi accusamus culpa fugit id quasi eveniet.
Impedit praesentium vel aliquam harum rerum facere alias a sunt doloremque. At quia libero maxime vitae quasi,
nemo dicta non repellendus, aspernatur beatae illum cumque mollitia. Explicabo voluptates nesciunt veritatis
tempora illum minima ratione molestiae suscipit officiis? Ullam illo temporibus sit recusandae quas, non
repudiandae, dolor reiciendis, rerum facere dicta alias inventore error nulla. Quisquam tempora, qui aperiam
incidunt praesentium pariatur voluptatibus! Minima voluptatibus magnam, commodi iste autem delectus totam in at
laborum iure laudantium provident quaerat labore temporibus repellat ipsa obcaecati aut quod rem deserunt eaque
explicabo inventore voluptas? Aliquam voluptate quidem corrupti incidunt officia dolorem. Repellat accusamus
enim reiciendis aliquid, sunt nesciunt quia facilis corrupti voluptas molestiae ratione neque pariatur.
Accusamus aut sit illum debitis, cupiditate minima iure error amet voluptas placeat, exercitationem ratione
asperiores harum quam officia totam! Quisquam corrupti obcaecati inventore quam quasi. Temporibus delectus vitae
assumenda eius voluptatibus iste nemo voluptatum laboriosam eaque sit. Earum repellendus eius ea itaque eaque
tempore blanditiis error voluptatibus sint dolores quisquam voluptates, nesciunt veritatis modi animi? Sed,
laborum amet vero quis fuga corrupti quisquam cumque eum debitis nostrum ex adipisci id nam distinctio, sunt
eveniet quos exercitationem quod illum omnis ipsam? Tempora amet voluptates, dolores quos ducimus nisi corporis
totam officiis molestiae temporibus. Sequi magnam libero hic necessitatibus eaque eos saepe sit, velit non
itaque aut officia eius, et explicabo. Inventore totam cupiditate voluptatum? Amet laudantium magnam ipsum
distinctio esse pariatur possimus quisquam ad optio, a, quidem eligendi tempore commodi odit aliquid inventore
nisi labore! Eum provident molestias optio vitae ut dicta, ab dolor rerum illo expedita aut animi nesciunt,
reprehenderit, hic saepe. Voluptatem aut repellat ex accusantium, ullam ratione natus est quidem, voluptatibus
amet dignissimos laudantium exercitationem laborum et? Excepturi fuga eligendi quae dignissimos. Repudiandae
dolorum doloribus tempore? Cupiditate saepe praesentium, molestiae distinctio soluta id architecto officiis quis
consectetur eveniet illo porro mollitia aperiam officia sunt amet explicabo assumenda. Quod nisi, alias
dignissimos facilis possimus labore ipsa, magni vitae natus praesentium laborum in culpa ad. Non maxime aut
repellat natus dolor enim accusantium aspernatur suscipit! Tempora harum ipsa maxime, nulla, minus dicta
temporibus quidem hic, exercitationem tenetur dignissimos aspernatur ea dolorem non beatae eveniet. Excepturi,
totam praesentium. Animi eos maiores minima nemo possimus, ut culpa. Repellat, mollitia quisquam dolor molestiae
sint ex asperiores, harum eveniet distinctio nam vel illo error necessitatibus iste, facilis soluta ea quos
aperiam officiis. Ut doloribus ipsum iusto dolorem dolorum, sed earum? Fugiat sint dicta praesentium voluptate
ea aperiam consequuntur natus reiciendis! Debitis assumenda illum numquam fugit consectetur voluptatum
recusandae nemo ullam, veritatis magni aspernatur eius, cupiditate expedita sed velit, quibusdam repudiandae
perferendis temporibus officia eum iste! Vero, sapiente! Ipsa sequi magnam, maxime illum corrupti nisi minus
doloribus aliquid placeat nobis aut repellendus voluptate beatae perspiciatis nihil quod tenetur? Possimus sunt
voluptatibus quis libero eligendi veniam reiciendis reprehenderit laboriosam deleniti obcaecati, aliquam
blanditiis eos assumenda odit. Fugiat, dolorum porro at eius nesciunt culpa id harum aliquam ipsum vitae
consequatur quo. Sunt aperiam ad voluptatibus assumenda consectetur excepturi magnam iste adipisci harum animi
illum sed, sint recusandae esse minus. Pariatur doloremque libero quos iste eveniet beatae accusantium nulla
iusto eius ad perferendis dolores placeat deleniti eum maxime in, neque harum obcaecati fugit? Quisquam ab,
nulla odio eligendi provident quibusdam repellat perspiciatis nesciunt? Quod nemo pariatur nesciunt veniam sequi
obcaecati eligendi eaque, sunt ratione blanditiis harum aliquid maxime consequuntur vitae ad incidunt mollitia
impedit. Velit autem expedita deserunt delectus sint quibusdam quod temporibus esse animi repellendus pariatur,
molestiae laborum a nulla reiciendis repudiandae cum vero necessitatibus iste suscipit optio ipsa illum! Error
nisi expedita dolor inventore earum sint tempore? Iste odio, repellendus velit, soluta accusantium iure totam
consequuntur saepe commodi officia illum voluptate repudiandae. Incidunt labore dolor hic sunt natus culpa
alias, quasi maiores magni architecto nam eveniet ex omnis, maxime mollitia quis odit rem aliquam voluptatem
exercitationem harum reiciendis accusamus porro molestiae? Veritatis beatae earum provident ratione, minima
sequi distinctio architecto! Aspernatur autem sint veritatis iste quidem placeat iusto, eum illum tempore
voluptatum possimus tempora veniam labore fuga necessitatibus. Ipsum sed voluptas excepturi illo, iusto officia
dignissimos, cumque totam, debitis at aperiam deserunt asperiores quo tempore amet cum nostrum sit doloremque
accusantium consequuntur repellat. Magnam provident vitae est officiis libero tempora quod excepturi aliquam
sunt. Libero nesciunt velit officia consequatur tempora ea laboriosam optio, neque reprehenderit maiores vel
consequuntur alias quia expedita! Molestiae voluptate impedit delectus voluptatum perspiciatis doloribus
voluptatem, nostrum architecto eos consequuntur deserunt maxime, vitae mollitia fugiat aperiam dolorem.
Inventore vitae sit iusto fugiat asperiores, perferendis ipsam, esse excepturi officiis itaque rem a sapiente
temporibus dolorum maxime iure soluta quaerat illum et alias. Error at, eligendi blanditiis ducimus laboriosam
dignissimos ab harum corporis culpa facere neque est vitae rem sunt quae. Facilis laborum fugiat nobis dolorem
quod facere sed placeat?</p>
</body>
</html>
我猜你想要达到的目标是：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: lightgreen;
background-color: rgb(133, 43, 43);
}
div.content {
display: grid;
grid-template-columns: 100px 1fr;
align-items: start;
grid-gap: 1rem;
}
div.content .text {
padding: 1rem;
}
nav ul li {
display: inline-block;
padding: 2rem;
text-decoration: none;
}
nav ul li:hover {
color: red;
cursor: pointer;
}
nav ul {
list-style-type: none;
text-align: center;
display: flex;
overflow: hidden;
}
nav {
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
}
nav:hover {
background-color: rgb(26, 26, 92);
}
.nav2 ul li {
display: block;
padding: 23px 24px 23px 24px;
text-decoration: none;
}
.nav2 {
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
top: 0;
position: sticky;
}
/* .nav2:hover{
display: none;
} */
/* @media (min-width:0%) and (max-width:100%) {
#nav{
display: inline-block;
}
} */
@keyframes navload {
from {
width: 0%;
}
to {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</nav>
<div class="content">
<div class="nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</div>
<div class="text">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum deserunt ducimus sequi architecto laboriosam recusandae repellendus cupiditate soluta voluptatibus quia repudiandae fuga maxime aspernatur, sed tenetur, aliquid omnis veniam cumque sit
velit, esse sunt? Reiciendis veniam, minima repudiandae officiis tempora sit id. Possimus dolore veniam aliquam perspiciatis ipsam odit at minus asperiores facere! Eaque quo fugit iste odit, quaerat doloribus, commodi nobis sapiente cum et distinctio
architecto consequatur ex eveniet sunt laborum! Facere debitis quos sapiente! Quidem, vitae ex sint impedit minus possimus? Saepe eius dolore fuga veniam. Consectetur nemo fugiat tenetur minima consequatur deserunt, quos cupiditate dolore fuga
mollitia, nihil pariatur beatae velit a enim ea voluptates blanditiis, veritatis iure sed ipsum. Praesentium dolor ducimus voluptatum, libero laborum, distinctio odio mollitia quaerat veritatis saepe magni commodi possimus ex aliquam unde necessitatibus
tenetur aut repudiandae nam soluta! Quos, veniam perferendis. Deleniti aliquid harum fuga, mollitia distinctio, quidem in reiciendis et odit ipsam officiis eum hic, nesciunt illum. In alias, rerum nesciunt sapiente a ad incidunt consectetur perferendis,
placeat necessitatibus doloremque magni. Odit, distinctio animi accusamus alias, voluptatem beatae doloribus fuga voluptate esse repellat quo tenetur facere eius laudantium aspernatur velit temporibus veritatis sequi corporis corrupti? Possimus
nihil vel necessitatibus vero consectetur eligendi voluptatem magnam alias laborum aperiam dolorum quod tenetur laudantium quas quibusdam temporibus eos incidunt accusamus fugit earum perspiciatis consequuntur fugiat, repellat nobis? Assumenda
dicta nihil placeat quam totam ab animi consequatur cumque praesentium vel voluptate dolores incidunt modi ipsa ex nostrum eligendi quidem labore culpa eveniet iusto, ad reiciendis ullam laudantium! Dolor voluptatibus laboriosam alias aperiam
nobis excepturi, deleniti deserunt unde! Molestias aperiam nisi esse laboriosam voluptatum cumque, eaque harum laborum reiciendis illo sint quidem doloribus accusantium recusandae praesentium cupiditate perferendis? Magni aspernatur fugit qui.
Odit similique esse eligendi aperiam enim neque quo, aliquam dolores ducimus, veniam ea amet explicabo reiciendis sequi minima unde iure beatae, et perferendis vel. Doloribus labore corrupti natus fuga magni incidunt dolorum, tenetur porro, eius
voluptatem dolore dolores maxime rem ducimus nihil praesentium maiores sapiente quos, quidem eveniet repellendus! Culpa neque est odio, cupiditate unde accusamus nulla iure! Neque accusamus quod laborum placeat non impedit architecto, laudantium
cupiditate ipsa molestiae cum magni vel deserunt nesciunt alias quidem quia numquam nihil corrupti! Fugit velit ut maxime nihil animi facere et dolores beatae tenetur, quibusdam optio molestiae quisquam minus sequi explicabo dolor quod a voluptate
autem maiores quas totam porro. Aliquid, reiciendis. Laborum doloribus natus nesciunt delectus iure incidunt fugiat tempore recusandae fuga omnis quod nisi commodi modi, reprehenderit exercitationem minima reiciendis tenetur? Sapiente reiciendis
id dolor. Rem quod nostrum quae quos, et optio in voluptatibus ex quas dolor saepe obcaecati quidem ullam. Sit commodi vero aspernatur error tempora in, non vitae sapiente assumenda perspiciatis et molestias esse accusantium deleniti minus, possimus
asperiores hic quod perferendis quasi laborum est quo. Voluptas quaerat incidunt eligendi nulla suscipit delectus ullam voluptatibus consequuntur vel autem. Voluptatem eos quas ex perferendis, suscipit aspernatur, aut praesentium laboriosam, facere
dignissimos et corrupti cumque consectetur doloremque harum? Hic fuga dolorum explicabo quae sunt, repellendus tempore quibusdam atque odio accusamus molestiae et deleniti eius voluptates, natus odit adipisci architecto officiis facilis non recusandae
aperiam cumque. Nobis, aut corporis. Voluptatum eaque optio labore maiores. Facere perspiciatis, itaque est ea maxime recusandae dolor, animi nostrum id earum deleniti nemo accusamus omnis culpa laudantium magnam sequi temporibus ratione ex repellat.
Doloribus eum fugiat nesciunt, magnam enim blanditiis earum consectetur. Nihil recusandae aperiam error saepe laborum exercitationem culpa maiores provident laboriosam, mollitia eius ab sed at atque alias ex possimus similique labore. Quis veritatis
sunt, eligendi iure illum ex commodi voluptatem esse deleniti voluptatum impedit dolores incidunt dignissimos. Veniam esse, recusandae molestias vitae mollitia ab officiis dolor perspiciatis commodi, assumenda maiores accusamus ex modi? Fuga commodi
illum maiores doloremque laborum ut dolore magni quibusdam vitae doloribus, alias rerum? Velit, quo? Ut, esse quo accusantium nobis velit beatae eos dolores? Ipsa, aliquid harum laborum in, facere perspiciatis labore magni quaerat consequatur
laudantium quibusdam error reiciendis accusamus, quis veritatis cumque dolore nulla temporibus eum. Repellendus quisquam omnis reiciendis nobis vitae nostrum tempore aspernatur. Quibusdam ipsum illo officia nihil tempora? Ducimus laudantium, aspernatur
ab velit, dolor cum alias perferendis quidem explicabo id saepe debitis reiciendis eligendi architecto vitae! Pariatur dolor fugiat optio nisi aut. Maxime fugit a nam tempore earum nisi incidunt. Vitae tenetur, rerum voluptatibus voluptatum deserunt
vel ratione itaque cumque facilis. Tempore, odit harum fugiat non doloribus ex totam omnis commodi aspernatur aperiam nostrum, nisi accusantium neque assumenda. Dolores dolorum cum accusamus ipsa iusto ab voluptate voluptatibus impedit sint voluptas,
ullam ad omnis pariatur quod debitis architecto porro perspiciatis voluptatum aspernatur est repudiandae commodi culpa. Rem distinctio ducimus iusto itaque, voluptas ratione impedit ab aspernatur repudiandae voluptatem vitae, magni esse sit voluptatibus
id assumenda non. Deleniti beatae vel odio? Repellat itaque, aliquid omnis harum laboriosam provident ut, repellendus, sit magni ex reiciendis accusamus? Soluta consequatur commodi iure debitis. Dolores officiis non voluptate? Ad fugiat sint adipisci
iste consectetur. Quos aliquid tenetur dicta cum temporibus eligendi dolorum dolore blanditiis rem iusto placeat velit enim dolores dolor sequi, voluptatum ipsa architecto ex praesentium id modi molestias molestiae beatae quaerat! Neque eligendi
dolores dolorum, nihil, esse quisquam delectus libero velit omnis laboriosam quae facere voluptatibus perferendis commodi ad sequi, perspiciatis suscipit ratione. Minus itaque sapiente quod corporis, vero ab, enim obcaecati nulla cupiditate magni
in quasi magnam nam, voluptate veniam! Dicta enim quo temporibus provident, nobis possimus alias eveniet maxime placeat dolores libero atque sunt molestias voluptates quibusdam harum nihil debitis suscipit repellat eligendi. Nam expedita quas,
perspiciatis labore amet voluptate, rerum similique consequuntur quod id, velit repudiandae non. Iste illum repellat maxime tempore vel esse alias cum quidem earum iure perferendis autem voluptatem eos odit, magnam praesentium velit. Dolore architecto
perspiciatis nihil ipsam ipsa nemo ut culpa adipisci assumenda officia soluta laboriosam possimus quae ad, illum, nesciunt deleniti aliquam voluptatem? Architecto consectetur explicabo quia quod fugit unde quis debitis! Non minima iste consectetur!
Harum qui, animi ad ducimus fugit porro voluptatum, velit nostrum officiis laudantium dolore eligendi commodi aliquam exercitationem ratione necessitatibus ab. Neque necessitatibus incidunt nihil! A odio obcaecati mollitia placeat, perferendis
non magnam soluta molestias nobis eaque voluptate dolores rem tempore enim alias illo quos nostrum inventore optio impedit nemo maxime aspernatur. Quam consequuntur enim esse quo est autem doloribus corporis porro repellat vitae odio fugiat, rem
dignissimos reiciendis ad! Minima voluptas, quam odit recusandae ipsa pariatur sit consequuntur distinctio autem sint fugiat eius reiciendis minus id voluptates adipisci, sapiente, tempore illo maiores at qui. Beatae omnis repellat nisi aspernatur
assumenda maxime, quia illum eos accusamus ex ducimus quibusdam tenetur, ipsam nobis, iusto labore consectetur excepturi quo atque blanditiis! Excepturi quo quisquam iusto veniam. Vel ipsum, molestias quisquam ipsam perferendis beatae libero architecto
id repellendus fuga velit eius voluptatum, harum ullam facere. Iusto est harum voluptatibus quibusdam iste magnam, cum quae a totam repellendus id aspernatur accusantium quas tenetur aliquam quasi laboriosam nihil facilis illo laudantium corporis
eum rem. Dignissimos ipsam quisquam ipsum natus. Voluptatum repellat consequatur id rerum atque tenetur eligendi molestiae nulla aliquam vero, quas excepturi non qui doloremque veniam quibusdam commodi iure repellendus. Beatae quia magnam modi
nemo ducimus? Delectus ex reiciendis, nulla aut laborum quam optio dolorem quaerat iste voluptates quod excepturi voluptatibus suscipit incidunt debitis dolorum doloremque dolor perferendis commodi accusamus culpa fugit id quasi eveniet. Impedit
praesentium vel aliquam harum rerum facere alias a sunt doloremque. At quia libero maxime vitae quasi, nemo dicta non repellendus, aspernatur beatae illum cumque mollitia. Explicabo voluptates nesciunt veritatis tempora illum minima ratione molestiae
suscipit officiis? Ullam illo temporibus sit recusandae quas, non repudiandae, dolor reiciendis, rerum facere dicta alias inventore error nulla. Quisquam tempora, qui aperiam incidunt praesentium pariatur voluptatibus! Minima voluptatibus magnam,
commodi iste autem delectus totam in at laborum iure laudantium provident quaerat labore temporibus repellat ipsa obcaecati aut quod rem deserunt eaque explicabo inventore voluptas? Aliquam voluptate quidem corrupti incidunt officia dolorem. Repellat
accusamus enim reiciendis aliquid, sunt nesciunt quia facilis corrupti voluptas molestiae ratione neque pariatur. Accusamus aut sit illum debitis, cupiditate minima iure error amet voluptas placeat, exercitationem ratione asperiores harum quam
officia totam! Quisquam corrupti obcaecati inventore quam quasi. Temporibus delectus vitae assumenda eius voluptatibus iste nemo voluptatum laboriosam eaque sit. Earum repellendus eius ea itaque eaque tempore blanditiis error voluptatibus sint
dolores quisquam voluptates, nesciunt veritatis modi animi? Sed, laborum amet vero quis fuga corrupti quisquam cumque eum debitis nostrum ex adipisci id nam distinctio, sunt eveniet quos exercitationem quod illum omnis ipsam? Tempora amet voluptates,
dolores quos ducimus nisi corporis totam officiis molestiae temporibus. Sequi magnam libero hic necessitatibus eaque eos saepe sit, velit non itaque aut officia eius, et explicabo. Inventore totam cupiditate voluptatum? Amet laudantium magnam
ipsum distinctio esse pariatur possimus quisquam ad optio, a, quidem eligendi tempore commodi odit aliquid inventore nisi labore! Eum provident molestias optio vitae ut dicta, ab dolor rerum illo expedita aut animi nesciunt, reprehenderit, hic
saepe. Voluptatem aut repellat ex accusantium, ullam ratione natus est quidem, voluptatibus amet dignissimos laudantium exercitationem laborum et? Excepturi fuga eligendi quae dignissimos. Repudiandae dolorum doloribus tempore? Cupiditate saepe
praesentium, molestiae distinctio soluta id architecto officiis quis consectetur eveniet illo porro mollitia aperiam officia sunt amet explicabo assumenda. Quod nisi, alias dignissimos facilis possimus labore ipsa, magni vitae natus praesentium
laborum in culpa ad. Non maxime aut repellat natus dolor enim accusantium aspernatur suscipit! Tempora harum ipsa maxime, nulla, minus dicta temporibus quidem hic, exercitationem tenetur dignissimos aspernatur ea dolorem non beatae eveniet. Excepturi,
totam praesentium. Animi eos maiores minima nemo possimus, ut culpa. Repellat, mollitia quisquam dolor molestiae sint ex asperiores, harum eveniet distinctio nam vel illo error necessitatibus iste, facilis soluta ea quos aperiam officiis. Ut doloribus
ipsum iusto dolorem dolorum, sed earum? Fugiat sint dicta praesentium voluptate ea aperiam consequuntur natus reiciendis! Debitis assumenda illum numquam fugit consectetur voluptatum recusandae nemo ullam, veritatis magni aspernatur eius, cupiditate
expedita sed velit, quibusdam repudiandae perferendis temporibus officia eum iste! Vero, sapiente! Ipsa sequi magnam, maxime illum corrupti nisi minus doloribus aliquid placeat nobis aut repellendus voluptate beatae perspiciatis nihil quod tenetur?
Possimus sunt voluptatibus quis libero eligendi veniam reiciendis reprehenderit laboriosam deleniti obcaecati, aliquam blanditiis eos assumenda odit. Fugiat, dolorum porro at eius nesciunt culpa id harum aliquam ipsum vitae consequatur quo. Sunt
aperiam ad voluptatibus assumenda consectetur excepturi magnam iste adipisci harum animi illum sed, sint recusandae esse minus. Pariatur doloremque libero quos iste eveniet beatae accusantium nulla iusto eius ad perferendis dolores placeat deleniti
eum maxime in, neque harum obcaecati fugit? Quisquam ab, nulla odio eligendi provident quibusdam repellat perspiciatis nesciunt? Quod nemo pariatur nesciunt veniam sequi obcaecati eligendi eaque, sunt ratione blanditiis harum aliquid maxime consequuntur
vitae ad incidunt mollitia impedit. Velit autem expedita deserunt delectus sint quibusdam quod temporibus esse animi repellendus pariatur, molestiae laborum a nulla reiciendis repudiandae cum vero necessitatibus iste suscipit optio ipsa illum!
Error nisi expedita dolor inventore earum sint tempore? Iste odio, repellendus velit, soluta accusantium iure totam consequuntur saepe commodi officia illum voluptate repudiandae. Incidunt labore dolor hic sunt natus culpa alias, quasi maiores
magni architecto nam eveniet ex omnis, maxime mollitia quis odit rem aliquam voluptatem exercitationem harum reiciendis accusamus porro molestiae? Veritatis beatae earum provident ratione, minima sequi distinctio architecto! Aspernatur autem sint
veritatis iste quidem placeat iusto, eum illum tempore voluptatum possimus tempora veniam labore fuga necessitatibus. Ipsum sed voluptas excepturi illo, iusto officia dignissimos, cumque totam, debitis at aperiam deserunt asperiores quo tempore
amet cum nostrum sit doloremque accusantium consequuntur repellat. Magnam provident vitae est officiis libero tempora quod excepturi aliquam sunt. Libero nesciunt velit officia consequatur tempora ea laboriosam optio, neque reprehenderit maiores
vel consequuntur alias quia expedita! Molestiae voluptate impedit delectus voluptatum perspiciatis doloribus voluptatem, nostrum architecto eos consequuntur deserunt maxime, vitae mollitia fugiat aperiam dolorem. Inventore vitae sit iusto fugiat
asperiores, perferendis ipsam, esse excepturi officiis itaque rem a sapiente temporibus dolorum maxime iure soluta quaerat illum et alias. Error at, eligendi blanditiis ducimus laboriosam dignissimos ab harum corporis culpa facere neque est vitae
rem sunt quae. Facilis laborum fugiat nobis dolorem quod facere sed placeat?</p>
</div>
</div>
</body>
</html>
我试图让导航栏动画响应，但在执行过程中，导航栏首先变成块元素，而不是在整个动画中保持内联块。 与其他导航栏相同，唯一的区别是第二个导航栏应从动画开始时保留块元素。 我尝试更改 nav 的显示属性，但仍然没有成功。请帮帮我。 下面给出了相同查询的代码（要忽略的代码旁边的注释）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
color: lightgreen;
background-color: rgb(133, 43, 43);
}
nav ul li {
display: inline-block;
margin: 1px 1px 1px 1px;
padding: 23px 24px 23px 24px;
text-decoration: none;
}
nav ul li:hover {
color: red;
cursor: pointer;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav {
margin: 1px -8px 1px -8px;
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
}
nav:hover {
background-color: rgb(26, 26, 92);
}
.nav2 ul li {
display: block;
margin: 1px 1px 1px 1px;
padding: 23px 24px 23px 24px;
text-decoration: none;
}
.nav2 {
margin: 1px -8px 1px -8px;
width: 10%;
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
top: 3px;
position: sticky;
}
/* .nav2:hover{
display: none;
} */
/* @media (min-width:0%) and (max-width:100%) {
#nav{
display: inline-block;
}
} */
@keyframes navload {
from {
width: 0%;
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente, doloremque fugit at repellendus
perferendis quos adipisci consequuntur iusto iure tempore neque aspernatur corrupti doloribus magni, error rerum
voluptate! Possimus?
</p>
<div class="nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum deserunt ducimus sequi architecto laboriosam
recusandae repellendus cupiditate soluta voluptatibus quia repudiandae fuga maxime aspernatur, sed tenetur,
aliquid omnis veniam cumque sit velit, esse sunt? Reiciendis veniam, minima repudiandae officiis tempora sit id.
Possimus dolore veniam aliquam perspiciatis ipsam odit at minus asperiores facere! Eaque quo fugit iste odit,
quaerat doloribus, commodi nobis sapiente cum et distinctio architecto consequatur ex eveniet sunt laborum!
Facere debitis quos sapiente! Quidem, vitae ex sint impedit minus possimus? Saepe eius dolore fuga veniam.
Consectetur nemo fugiat tenetur minima consequatur deserunt, quos cupiditate dolore fuga mollitia, nihil
pariatur beatae velit a enim ea voluptates blanditiis, veritatis iure sed ipsum. Praesentium dolor ducimus
voluptatum, libero laborum, distinctio odio mollitia quaerat veritatis saepe magni commodi possimus ex aliquam
unde necessitatibus tenetur aut repudiandae nam soluta! Quos, veniam perferendis. Deleniti aliquid harum fuga,
mollitia distinctio, quidem in reiciendis et odit ipsam officiis eum hic, nesciunt illum. In alias, rerum
nesciunt sapiente a ad incidunt consectetur perferendis, placeat necessitatibus doloremque magni. Odit,
distinctio animi accusamus alias, voluptatem beatae doloribus fuga voluptate esse repellat quo tenetur facere
eius laudantium aspernatur velit temporibus veritatis sequi corporis corrupti? Possimus nihil vel necessitatibus
vero consectetur eligendi voluptatem magnam alias laborum aperiam dolorum quod tenetur laudantium quas quibusdam
temporibus eos incidunt accusamus fugit earum perspiciatis consequuntur fugiat, repellat nobis? Assumenda dicta
nihil placeat quam totam ab animi consequatur cumque praesentium vel voluptate dolores incidunt modi ipsa ex
nostrum eligendi quidem labore culpa eveniet iusto, ad reiciendis ullam laudantium! Dolor voluptatibus
laboriosam alias aperiam nobis excepturi, deleniti deserunt unde! Molestias aperiam nisi esse laboriosam
voluptatum cumque, eaque harum laborum reiciendis illo sint quidem doloribus accusantium recusandae praesentium
cupiditate perferendis? Magni aspernatur fugit qui. Odit similique esse eligendi aperiam enim neque quo, aliquam
dolores ducimus, veniam ea amet explicabo reiciendis sequi minima unde iure beatae, et perferendis vel.
Doloribus labore corrupti natus fuga magni incidunt dolorum, tenetur porro, eius voluptatem dolore dolores
maxime rem ducimus nihil praesentium maiores sapiente quos, quidem eveniet repellendus! Culpa neque est odio,
cupiditate unde accusamus nulla iure! Neque accusamus quod laborum placeat non impedit architecto, laudantium
cupiditate ipsa molestiae cum magni vel deserunt nesciunt alias quidem quia numquam nihil corrupti! Fugit velit
ut maxime nihil animi facere et dolores beatae tenetur, quibusdam optio molestiae quisquam minus sequi explicabo
dolor quod a voluptate autem maiores quas totam porro. Aliquid, reiciendis. Laborum doloribus natus nesciunt
delectus iure incidunt fugiat tempore recusandae fuga omnis quod nisi commodi modi, reprehenderit exercitationem
minima reiciendis tenetur? Sapiente reiciendis id dolor. Rem quod nostrum quae quos, et optio in voluptatibus ex
quas dolor saepe obcaecati quidem ullam. Sit commodi vero aspernatur error tempora in, non vitae sapiente
assumenda perspiciatis et molestias esse accusantium deleniti minus, possimus asperiores hic quod perferendis
quasi laborum est quo. Voluptas quaerat incidunt eligendi nulla suscipit delectus ullam voluptatibus
consequuntur vel autem. Voluptatem eos quas ex perferendis, suscipit aspernatur, aut praesentium laboriosam,
facere dignissimos et corrupti cumque consectetur doloremque harum? Hic fuga dolorum explicabo quae sunt,
repellendus tempore quibusdam atque odio accusamus molestiae et deleniti eius voluptates, natus odit adipisci
architecto officiis facilis non recusandae aperiam cumque. Nobis, aut corporis. Voluptatum eaque optio labore
maiores. Facere perspiciatis, itaque est ea maxime recusandae dolor, animi nostrum id earum deleniti nemo
accusamus omnis culpa laudantium magnam sequi temporibus ratione ex repellat. Doloribus eum fugiat nesciunt,
magnam enim blanditiis earum consectetur. Nihil recusandae aperiam error saepe laborum exercitationem culpa
maiores provident laboriosam, mollitia eius ab sed at atque alias ex possimus similique labore. Quis veritatis
sunt, eligendi iure illum ex commodi voluptatem esse deleniti voluptatum impedit dolores incidunt dignissimos.
Veniam esse, recusandae molestias vitae mollitia ab officiis dolor perspiciatis commodi, assumenda maiores
accusamus ex modi? Fuga commodi illum maiores doloremque laborum ut dolore magni quibusdam vitae doloribus,
alias rerum? Velit, quo? Ut, esse quo accusantium nobis velit beatae eos dolores? Ipsa, aliquid harum laborum
in, facere perspiciatis labore magni quaerat consequatur laudantium quibusdam error reiciendis accusamus, quis
veritatis cumque dolore nulla temporibus eum. Repellendus quisquam omnis reiciendis nobis vitae nostrum tempore
aspernatur. Quibusdam ipsum illo officia nihil tempora? Ducimus laudantium, aspernatur ab velit, dolor cum alias
perferendis quidem explicabo id saepe debitis reiciendis eligendi architecto vitae! Pariatur dolor fugiat optio
nisi aut. Maxime fugit a nam tempore earum nisi incidunt. Vitae tenetur, rerum voluptatibus voluptatum deserunt
vel ratione itaque cumque facilis. Tempore, odit harum fugiat non doloribus ex totam omnis commodi aspernatur
aperiam nostrum, nisi accusantium neque assumenda. Dolores dolorum cum accusamus ipsa iusto ab voluptate
voluptatibus impedit sint voluptas, ullam ad omnis pariatur quod debitis architecto porro perspiciatis
voluptatum aspernatur est repudiandae commodi culpa. Rem distinctio ducimus iusto itaque, voluptas ratione
impedit ab aspernatur repudiandae voluptatem vitae, magni esse sit voluptatibus id assumenda non. Deleniti
beatae vel odio? Repellat itaque, aliquid omnis harum laboriosam provident ut, repellendus, sit magni ex
reiciendis accusamus? Soluta consequatur commodi iure debitis. Dolores officiis non voluptate? Ad fugiat sint
adipisci iste consectetur. Quos aliquid tenetur dicta cum temporibus eligendi dolorum dolore blanditiis rem
iusto placeat velit enim dolores dolor sequi, voluptatum ipsa architecto ex praesentium id modi molestias
molestiae beatae quaerat! Neque eligendi dolores dolorum, nihil, esse quisquam delectus libero velit omnis
laboriosam quae facere voluptatibus perferendis commodi ad sequi, perspiciatis suscipit ratione. Minus itaque
sapiente quod corporis, vero ab, enim obcaecati nulla cupiditate magni in quasi magnam nam, voluptate veniam!
Dicta enim quo temporibus provident, nobis possimus alias eveniet maxime placeat dolores libero atque sunt
molestias voluptates quibusdam harum nihil debitis suscipit repellat eligendi. Nam expedita quas, perspiciatis
labore amet voluptate, rerum similique consequuntur quod id, velit repudiandae non. Iste illum repellat maxime
tempore vel esse alias cum quidem earum iure perferendis autem voluptatem eos odit, magnam praesentium velit.
Dolore architecto perspiciatis nihil ipsam ipsa nemo ut culpa adipisci assumenda officia soluta laboriosam
possimus quae ad, illum, nesciunt deleniti aliquam voluptatem? Architecto consectetur explicabo quia quod fugit
unde quis debitis! Non minima iste consectetur! Harum qui, animi ad ducimus fugit porro voluptatum, velit
nostrum officiis laudantium dolore eligendi commodi aliquam exercitationem ratione necessitatibus ab. Neque
necessitatibus incidunt nihil! A odio obcaecati mollitia placeat, perferendis non magnam soluta molestias nobis
eaque voluptate dolores rem tempore enim alias illo quos nostrum inventore optio impedit nemo maxime aspernatur.
Quam consequuntur enim esse quo est autem doloribus corporis porro repellat vitae odio fugiat, rem dignissimos
reiciendis ad! Minima voluptas, quam odit recusandae ipsa pariatur sit consequuntur distinctio autem sint fugiat
eius reiciendis minus id voluptates adipisci, sapiente, tempore illo maiores at qui. Beatae omnis repellat nisi
aspernatur assumenda maxime, quia illum eos accusamus ex ducimus quibusdam tenetur, ipsam nobis, iusto labore
consectetur excepturi quo atque blanditiis! Excepturi quo quisquam iusto veniam. Vel ipsum, molestias quisquam
ipsam perferendis beatae libero architecto id repellendus fuga velit eius voluptatum, harum ullam facere. Iusto
est harum voluptatibus quibusdam iste magnam, cum quae a totam repellendus id aspernatur accusantium quas
tenetur aliquam quasi laboriosam nihil facilis illo laudantium corporis eum rem. Dignissimos ipsam quisquam
ipsum natus. Voluptatum repellat consequatur id rerum atque tenetur eligendi molestiae nulla aliquam vero, quas
excepturi non qui doloremque veniam quibusdam commodi iure repellendus. Beatae quia magnam modi nemo ducimus?
Delectus ex reiciendis, nulla aut laborum quam optio dolorem quaerat iste voluptates quod excepturi voluptatibus
suscipit incidunt debitis dolorum doloremque dolor perferendis commodi accusamus culpa fugit id quasi eveniet.
Impedit praesentium vel aliquam harum rerum facere alias a sunt doloremque. At quia libero maxime vitae quasi,
nemo dicta non repellendus, aspernatur beatae illum cumque mollitia. Explicabo voluptates nesciunt veritatis
tempora illum minima ratione molestiae suscipit officiis? Ullam illo temporibus sit recusandae quas, non
repudiandae, dolor reiciendis, rerum facere dicta alias inventore error nulla. Quisquam tempora, qui aperiam
incidunt praesentium pariatur voluptatibus! Minima voluptatibus magnam, commodi iste autem delectus totam in at
laborum iure laudantium provident quaerat labore temporibus repellat ipsa obcaecati aut quod rem deserunt eaque
explicabo inventore voluptas? Aliquam voluptate quidem corrupti incidunt officia dolorem. Repellat accusamus
enim reiciendis aliquid, sunt nesciunt quia facilis corrupti voluptas molestiae ratione neque pariatur.
Accusamus aut sit illum debitis, cupiditate minima iure error amet voluptas placeat, exercitationem ratione
asperiores harum quam officia totam! Quisquam corrupti obcaecati inventore quam quasi. Temporibus delectus vitae
assumenda eius voluptatibus iste nemo voluptatum laboriosam eaque sit. Earum repellendus eius ea itaque eaque
tempore blanditiis error voluptatibus sint dolores quisquam voluptates, nesciunt veritatis modi animi? Sed,
laborum amet vero quis fuga corrupti quisquam cumque eum debitis nostrum ex adipisci id nam distinctio, sunt
eveniet quos exercitationem quod illum omnis ipsam? Tempora amet voluptates, dolores quos ducimus nisi corporis
totam officiis molestiae temporibus. Sequi magnam libero hic necessitatibus eaque eos saepe sit, velit non
itaque aut officia eius, et explicabo. Inventore totam cupiditate voluptatum? Amet laudantium magnam ipsum
distinctio esse pariatur possimus quisquam ad optio, a, quidem eligendi tempore commodi odit aliquid inventore
nisi labore! Eum provident molestias optio vitae ut dicta, ab dolor rerum illo expedita aut animi nesciunt,
reprehenderit, hic saepe. Voluptatem aut repellat ex accusantium, ullam ratione natus est quidem, voluptatibus
amet dignissimos laudantium exercitationem laborum et? Excepturi fuga eligendi quae dignissimos. Repudiandae
dolorum doloribus tempore? Cupiditate saepe praesentium, molestiae distinctio soluta id architecto officiis quis
consectetur eveniet illo porro mollitia aperiam officia sunt amet explicabo assumenda. Quod nisi, alias
dignissimos facilis possimus labore ipsa, magni vitae natus praesentium laborum in culpa ad. Non maxime aut
repellat natus dolor enim accusantium aspernatur suscipit! Tempora harum ipsa maxime, nulla, minus dicta
temporibus quidem hic, exercitationem tenetur dignissimos aspernatur ea dolorem non beatae eveniet. Excepturi,
totam praesentium. Animi eos maiores minima nemo possimus, ut culpa. Repellat, mollitia quisquam dolor molestiae
sint ex asperiores, harum eveniet distinctio nam vel illo error necessitatibus iste, facilis soluta ea quos
aperiam officiis. Ut doloribus ipsum iusto dolorem dolorum, sed earum? Fugiat sint dicta praesentium voluptate
ea aperiam consequuntur natus reiciendis! Debitis assumenda illum numquam fugit consectetur voluptatum
recusandae nemo ullam, veritatis magni aspernatur eius, cupiditate expedita sed velit, quibusdam repudiandae
perferendis temporibus officia eum iste! Vero, sapiente! Ipsa sequi magnam, maxime illum corrupti nisi minus
doloribus aliquid placeat nobis aut repellendus voluptate beatae perspiciatis nihil quod tenetur? Possimus sunt
voluptatibus quis libero eligendi veniam reiciendis reprehenderit laboriosam deleniti obcaecati, aliquam
blanditiis eos assumenda odit. Fugiat, dolorum porro at eius nesciunt culpa id harum aliquam ipsum vitae
consequatur quo. Sunt aperiam ad voluptatibus assumenda consectetur excepturi magnam iste adipisci harum animi
illum sed, sint recusandae esse minus. Pariatur doloremque libero quos iste eveniet beatae accusantium nulla
iusto eius ad perferendis dolores placeat deleniti eum maxime in, neque harum obcaecati fugit? Quisquam ab,
nulla odio eligendi provident quibusdam repellat perspiciatis nesciunt? Quod nemo pariatur nesciunt veniam sequi
obcaecati eligendi eaque, sunt ratione blanditiis harum aliquid maxime consequuntur vitae ad incidunt mollitia
impedit. Velit autem expedita deserunt delectus sint quibusdam quod temporibus esse animi repellendus pariatur,
molestiae laborum a nulla reiciendis repudiandae cum vero necessitatibus iste suscipit optio ipsa illum! Error
nisi expedita dolor inventore earum sint tempore? Iste odio, repellendus velit, soluta accusantium iure totam
consequuntur saepe commodi officia illum voluptate repudiandae. Incidunt labore dolor hic sunt natus culpa
alias, quasi maiores magni architecto nam eveniet ex omnis, maxime mollitia quis odit rem aliquam voluptatem
exercitationem harum reiciendis accusamus porro molestiae? Veritatis beatae earum provident ratione, minima
sequi distinctio architecto! Aspernatur autem sint veritatis iste quidem placeat iusto, eum illum tempore
voluptatum possimus tempora veniam labore fuga necessitatibus. Ipsum sed voluptas excepturi illo, iusto officia
dignissimos, cumque totam, debitis at aperiam deserunt asperiores quo tempore amet cum nostrum sit doloremque
accusantium consequuntur repellat. Magnam provident vitae est officiis libero tempora quod excepturi aliquam
sunt. Libero nesciunt velit officia consequatur tempora ea laboriosam optio, neque reprehenderit maiores vel
consequuntur alias quia expedita! Molestiae voluptate impedit delectus voluptatum perspiciatis doloribus
voluptatem, nostrum architecto eos consequuntur deserunt maxime, vitae mollitia fugiat aperiam dolorem.
Inventore vitae sit iusto fugiat asperiores, perferendis ipsam, esse excepturi officiis itaque rem a sapiente
temporibus dolorum maxime iure soluta quaerat illum et alias. Error at, eligendi blanditiis ducimus laboriosam
dignissimos ab harum corporis culpa facere neque est vitae rem sunt quae. Facilis laborum fugiat nobis dolorem
quod facere sed placeat?</p>
</body>
</html>
我猜你想要达到的目标是：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: lightgreen;
background-color: rgb(133, 43, 43);
}
div.content {
display: grid;
grid-template-columns: 100px 1fr;
align-items: start;
grid-gap: 1rem;
}
div.content .text {
padding: 1rem;
}
nav ul li {
display: inline-block;
padding: 2rem;
text-decoration: none;
}
nav ul li:hover {
color: red;
cursor: pointer;
}
nav ul {
list-style-type: none;
text-align: center;
display: flex;
overflow: hidden;
}
nav {
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
}
nav:hover {
background-color: rgb(26, 26, 92);
}
.nav2 ul li {
display: block;
padding: 23px 24px 23px 24px;
text-decoration: none;
}
.nav2 {
background-color: black;
animation-name: navload;
animation-duration: 3s;
animation-iteration-count: 1;
transition-duration: 2s;
top: 0;
position: sticky;
}
/* .nav2:hover{
display: none;
} */
/* @media (min-width:0%) and (max-width:100%) {
#nav{
display: inline-block;
}
} */
@keyframes navload {
from {
width: 0%;
}
to {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</nav>
<div class="content">
<div class="nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Reject</li>
</ul>
</div>
<div class="text">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum deserunt ducimus sequi architecto laboriosam recusandae repellendus cupiditate soluta voluptatibus quia repudiandae fuga maxime aspernatur, sed tenetur, aliquid omnis veniam cumque sit
velit, esse sunt? Reiciendis veniam, minima repudiandae officiis tempora sit id. Possimus dolore veniam aliquam perspiciatis ipsam odit at minus asperiores facere! Eaque quo fugit iste odit, quaerat doloribus, commodi nobis sapiente cum et distinctio
architecto consequatur ex eveniet sunt laborum! Facere debitis quos sapiente! Quidem, vitae ex sint impedit minus possimus? Saepe eius dolore fuga veniam. Consectetur nemo fugiat tenetur minima consequatur deserunt, quos cupiditate dolore fuga
mollitia, nihil pariatur beatae velit a enim ea voluptates blanditiis, veritatis iure sed ipsum. Praesentium dolor ducimus voluptatum, libero laborum, distinctio odio mollitia quaerat veritatis saepe magni commodi possimus ex aliquam unde necessitatibus
tenetur aut repudiandae nam soluta! Quos, veniam perferendis. Deleniti aliquid harum fuga, mollitia distinctio, quidem in reiciendis et odit ipsam officiis eum hic, nesciunt illum. In alias, rerum nesciunt sapiente a ad incidunt consectetur perferendis,
placeat necessitatibus doloremque magni. Odit, distinctio animi accusamus alias, voluptatem beatae doloribus fuga voluptate esse repellat quo tenetur facere eius laudantium aspernatur velit temporibus veritatis sequi corporis corrupti? Possimus
nihil vel necessitatibus vero consectetur eligendi voluptatem magnam alias laborum aperiam dolorum quod tenetur laudantium quas quibusdam temporibus eos incidunt accusamus fugit earum perspiciatis consequuntur fugiat, repellat nobis? Assumenda
dicta nihil placeat quam totam ab animi consequatur cumque praesentium vel voluptate dolores incidunt modi ipsa ex nostrum eligendi quidem labore culpa eveniet iusto, ad reiciendis ullam laudantium! Dolor voluptatibus laboriosam alias aperiam
nobis excepturi, deleniti deserunt unde! Molestias aperiam nisi esse laboriosam voluptatum cumque, eaque harum laborum reiciendis illo sint quidem doloribus accusantium recusandae praesentium cupiditate perferendis? Magni aspernatur fugit qui.
Odit similique esse eligendi aperiam enim neque quo, aliquam dolores ducimus, veniam ea amet explicabo reiciendis sequi minima unde iure beatae, et perferendis vel. Doloribus labore corrupti natus fuga magni incidunt dolorum, tenetur porro, eius
voluptatem dolore dolores maxime rem ducimus nihil praesentium maiores sapiente quos, quidem eveniet repellendus! Culpa neque est odio, cupiditate unde accusamus nulla iure! Neque accusamus quod laborum placeat non impedit architecto, laudantium
cupiditate ipsa molestiae cum magni vel deserunt nesciunt alias quidem quia numquam nihil corrupti! Fugit velit ut maxime nihil animi facere et dolores beatae tenetur, quibusdam optio molestiae quisquam minus sequi explicabo dolor quod a voluptate
autem maiores quas totam porro. Aliquid, reiciendis. Laborum doloribus natus nesciunt delectus iure incidunt fugiat tempore recusandae fuga omnis quod nisi commodi modi, reprehenderit exercitationem minima reiciendis tenetur? Sapiente reiciendis
id dolor. Rem quod nostrum quae quos, et optio in voluptatibus ex quas dolor saepe obcaecati quidem ullam. Sit commodi vero aspernatur error tempora in, non vitae sapiente assumenda perspiciatis et molestias esse accusantium deleniti minus, possimus
asperiores hic quod perferendis quasi laborum est quo. Voluptas quaerat incidunt eligendi nulla suscipit delectus ullam voluptatibus consequuntur vel autem. Voluptatem eos quas ex perferendis, suscipit aspernatur, aut praesentium laboriosam, facere
dignissimos et corrupti cumque consectetur doloremque harum? Hic fuga dolorum explicabo quae sunt, repellendus tempore quibusdam atque odio accusamus molestiae et deleniti eius voluptates, natus odit adipisci architecto officiis facilis non recusandae
aperiam cumque. Nobis, aut corporis. Voluptatum eaque optio labore maiores. Facere perspiciatis, itaque est ea maxime recusandae dolor, animi nostrum id earum deleniti nemo accusamus omnis culpa laudantium magnam sequi temporibus ratione ex repellat.
Doloribus eum fugiat nesciunt, magnam enim blanditiis earum consectetur. Nihil recusandae aperiam error saepe laborum exercitationem culpa maiores provident laboriosam, mollitia eius ab sed at atque alias ex possimus similique labore. Quis veritatis
sunt, eligendi iure illum ex commodi voluptatem esse deleniti voluptatum impedit dolores incidunt dignissimos. Veniam esse, recusandae molestias vitae mollitia ab officiis dolor perspiciatis commodi, assumenda maiores accusamus ex modi? Fuga commodi
illum maiores doloremque laborum ut dolore magni quibusdam vitae doloribus, alias rerum? Velit, quo? Ut, esse quo accusantium nobis velit beatae eos dolores? Ipsa, aliquid harum laborum in, facere perspiciatis labore magni quaerat consequatur
laudantium quibusdam error reiciendis accusamus, quis veritatis cumque dolore nulla temporibus eum. Repellendus quisquam omnis reiciendis nobis vitae nostrum tempore aspernatur. Quibusdam ipsum illo officia nihil tempora? Ducimus laudantium, aspernatur
ab velit, dolor cum alias perferendis quidem explicabo id saepe debitis reiciendis eligendi architecto vitae! Pariatur dolor fugiat optio nisi aut. Maxime fugit a nam tempore earum nisi incidunt. Vitae tenetur, rerum voluptatibus voluptatum deserunt
vel ratione itaque cumque facilis. Tempore, odit harum fugiat non doloribus ex totam omnis commodi aspernatur aperiam nostrum, nisi accusantium neque assumenda. Dolores dolorum cum accusamus ipsa iusto ab voluptate voluptatibus impedit sint voluptas,
ullam ad omnis pariatur quod debitis architecto porro perspiciatis voluptatum aspernatur est repudiandae commodi culpa. Rem distinctio ducimus iusto itaque, voluptas ratione impedit ab aspernatur repudiandae voluptatem vitae, magni esse sit voluptatibus
id assumenda non. Deleniti beatae vel odio? Repellat itaque, aliquid omnis harum laboriosam provident ut, repellendus, sit magni ex reiciendis accusamus? Soluta consequatur commodi iure debitis. Dolores officiis non voluptate? Ad fugiat sint adipisci
iste consectetur. Quos aliquid tenetur dicta cum temporibus eligendi dolorum dolore blanditiis rem iusto placeat velit enim dolores dolor sequi, voluptatum ipsa architecto ex praesentium id modi molestias molestiae beatae quaerat! Neque eligendi
dolores dolorum, nihil, esse quisquam delectus libero velit omnis laboriosam quae facere voluptatibus perferendis commodi ad sequi, perspiciatis suscipit ratione. Minus itaque sapiente quod corporis, vero ab, enim obcaecati nulla cupiditate magni
in quasi magnam nam, voluptate veniam! Dicta enim quo temporibus provident, nobis possimus alias eveniet maxime placeat dolores libero atque sunt molestias voluptates quibusdam harum nihil debitis suscipit repellat eligendi. Nam expedita quas,
perspiciatis labore amet voluptate, rerum similique consequuntur quod id, velit repudiandae non. Iste illum repellat maxime tempore vel esse alias cum quidem earum iure perferendis autem voluptatem eos odit, magnam praesentium velit. Dolore architecto
perspiciatis nihil ipsam ipsa nemo ut culpa adipisci assumenda officia soluta laboriosam possimus quae ad, illum, nesciunt deleniti aliquam voluptatem? Architecto consectetur explicabo quia quod fugit unde quis debitis! Non minima iste consectetur!
Harum qui, animi ad ducimus fugit porro voluptatum, velit nostrum officiis laudantium dolore eligendi commodi aliquam exercitationem ratione necessitatibus ab. Neque necessitatibus incidunt nihil! A odio obcaecati mollitia placeat, perferendis
non magnam soluta molestias nobis eaque voluptate dolores rem tempore enim alias illo quos nostrum inventore optio impedit nemo maxime aspernatur. Quam consequuntur enim esse quo est autem doloribus corporis porro repellat vitae odio fugiat, rem
dignissimos reiciendis ad! Minima voluptas, quam odit recusandae ipsa pariatur sit consequuntur distinctio autem sint fugiat eius reiciendis minus id voluptates adipisci, sapiente, tempore illo maiores at qui. Beatae omnis repellat nisi aspernatur
assumenda maxime, quia illum eos accusamus ex ducimus quibusdam tenetur, ipsam nobis, iusto labore consectetur excepturi quo atque blanditiis! Excepturi quo quisquam iusto veniam. Vel ipsum, molestias quisquam ipsam perferendis beatae libero architecto
id repellendus fuga velit eius voluptatum, harum ullam facere. Iusto est harum voluptatibus quibusdam iste magnam, cum quae a totam repellendus id aspernatur accusantium quas tenetur aliquam quasi laboriosam nihil facilis illo laudantium corporis
eum rem. Dignissimos ipsam quisquam ipsum natus. Voluptatum repellat consequatur id rerum atque tenetur eligendi molestiae nulla aliquam vero, quas excepturi non qui doloremque veniam quibusdam commodi iure repellendus. Beatae quia magnam modi
nemo ducimus? Delectus ex reiciendis, nulla aut laborum quam optio dolorem quaerat iste voluptates quod excepturi voluptatibus suscipit incidunt debitis dolorum doloremque dolor perferendis commodi accusamus culpa fugit id quasi eveniet. Impedit
praesentium vel aliquam harum rerum facere alias a sunt doloremque. At quia libero maxime vitae quasi, nemo dicta non repellendus, aspernatur beatae illum cumque mollitia. Explicabo voluptates nesciunt veritatis tempora illum minima ratione molestiae
suscipit officiis? Ullam illo temporibus sit recusandae quas, non repudiandae, dolor reiciendis, rerum facere dicta alias inventore error nulla. Quisquam tempora, qui aperiam incidunt praesentium pariatur voluptatibus! Minima voluptatibus magnam,
commodi iste autem delectus totam in at laborum iure laudantium provident quaerat labore temporibus repellat ipsa obcaecati aut quod rem deserunt eaque explicabo inventore voluptas? Aliquam voluptate quidem corrupti incidunt officia dolorem. Repellat
accusamus enim reiciendis aliquid, sunt nesciunt quia facilis corrupti voluptas molestiae ratione neque pariatur. Accusamus aut sit illum debitis, cupiditate minima iure error amet voluptas placeat, exercitationem ratione asperiores harum quam
officia totam! Quisquam corrupti obcaecati inventore quam quasi. Temporibus delectus vitae assumenda eius voluptatibus iste nemo voluptatum laboriosam eaque sit. Earum repellendus eius ea itaque eaque tempore blanditiis error voluptatibus sint
dolores quisquam voluptates, nesciunt veritatis modi animi? Sed, laborum amet vero quis fuga corrupti quisquam cumque eum debitis nostrum ex adipisci id nam distinctio, sunt eveniet quos exercitationem quod illum omnis ipsam? Tempora amet voluptates,
dolores quos ducimus nisi corporis totam officiis molestiae temporibus. Sequi magnam libero hic necessitatibus eaque eos saepe sit, velit non itaque aut officia eius, et explicabo. Inventore totam cupiditate voluptatum? Amet laudantium magnam
ipsum distinctio esse pariatur possimus quisquam ad optio, a, quidem eligendi tempore commodi odit aliquid inventore nisi labore! Eum provident molestias optio vitae ut dicta, ab dolor rerum illo expedita aut animi nesciunt, reprehenderit, hic
saepe. Voluptatem aut repellat ex accusantium, ullam ratione natus est quidem, voluptatibus amet dignissimos laudantium exercitationem laborum et? Excepturi fuga eligendi quae dignissimos. Repudiandae dolorum doloribus tempore? Cupiditate saepe
praesentium, molestiae distinctio soluta id architecto officiis quis consectetur eveniet illo porro mollitia aperiam officia sunt amet explicabo assumenda. Quod nisi, alias dignissimos facilis possimus labore ipsa, magni vitae natus praesentium
laborum in culpa ad. Non maxime aut repellat natus dolor enim accusantium aspernatur suscipit! Tempora harum ipsa maxime, nulla, minus dicta temporibus quidem hic, exercitationem tenetur dignissimos aspernatur ea dolorem non beatae eveniet. Excepturi,
totam praesentium. Animi eos maiores minima nemo possimus, ut culpa. Repellat, mollitia quisquam dolor molestiae sint ex asperiores, harum eveniet distinctio nam vel illo error necessitatibus iste, facilis soluta ea quos aperiam officiis. Ut doloribus
ipsum iusto dolorem dolorum, sed earum? Fugiat sint dicta praesentium voluptate ea aperiam consequuntur natus reiciendis! Debitis assumenda illum numquam fugit consectetur voluptatum recusandae nemo ullam, veritatis magni aspernatur eius, cupiditate
expedita sed velit, quibusdam repudiandae perferendis temporibus officia eum iste! Vero, sapiente! Ipsa sequi magnam, maxime illum corrupti nisi minus doloribus aliquid placeat nobis aut repellendus voluptate beatae perspiciatis nihil quod tenetur?
Possimus sunt voluptatibus quis libero eligendi veniam reiciendis reprehenderit laboriosam deleniti obcaecati, aliquam blanditiis eos assumenda odit. Fugiat, dolorum porro at eius nesciunt culpa id harum aliquam ipsum vitae consequatur quo. Sunt
aperiam ad voluptatibus assumenda consectetur excepturi magnam iste adipisci harum animi illum sed, sint recusandae esse minus. Pariatur doloremque libero quos iste eveniet beatae accusantium nulla iusto eius ad perferendis dolores placeat deleniti
eum maxime in, neque harum obcaecati fugit? Quisquam ab, nulla odio eligendi provident quibusdam repellat perspiciatis nesciunt? Quod nemo pariatur nesciunt veniam sequi obcaecati eligendi eaque, sunt ratione blanditiis harum aliquid maxime consequuntur
vitae ad incidunt mollitia impedit. Velit autem expedita deserunt delectus sint quibusdam quod temporibus esse animi repellendus pariatur, molestiae laborum a nulla reiciendis repudiandae cum vero necessitatibus iste suscipit optio ipsa illum!
Error nisi expedita dolor inventore earum sint tempore? Iste odio, repellendus velit, soluta accusantium iure totam consequuntur saepe commodi officia illum voluptate repudiandae. Incidunt labore dolor hic sunt natus culpa alias, quasi maiores
magni architecto nam eveniet ex omnis, maxime mollitia quis odit rem aliquam voluptatem exercitationem harum reiciendis accusamus porro molestiae? Veritatis beatae earum provident ratione, minima sequi distinctio architecto! Aspernatur autem sint
veritatis iste quidem placeat iusto, eum illum tempore voluptatum possimus tempora veniam labore fuga necessitatibus. Ipsum sed voluptas excepturi illo, iusto officia dignissimos, cumque totam, debitis at aperiam deserunt asperiores quo tempore
amet cum nostrum sit doloremque accusantium consequuntur repellat. Magnam provident vitae est officiis libero tempora quod excepturi aliquam sunt. Libero nesciunt velit officia consequatur tempora ea laboriosam optio, neque reprehenderit maiores
vel consequuntur alias quia expedita! Molestiae voluptate impedit delectus voluptatum perspiciatis doloribus voluptatem, nostrum architecto eos consequuntur deserunt maxime, vitae mollitia fugiat aperiam dolorem. Inventore vitae sit iusto fugiat
asperiores, perferendis ipsam, esse excepturi officiis itaque rem a sapiente temporibus dolorum maxime iure soluta quaerat illum et alias. Error at, eligendi blanditiis ducimus laboriosam dignissimos ab harum corporis culpa facere neque est vitae
rem sunt quae. Facilis laborum fugiat nobis dolorem quod facere sed placeat?</p>
</div>
</div>
</body>
</html>