避免关键帧动画溢出导航子菜单

Question

我有以下HTML和CSS，您也可以在JSfiddle here中找到它们：

/* Header & Naviagtion */

.header {
  width: 100%;
  height: 10%;
  position: fixed;
}

.navigation {
  width: 100%;
  height: 100%;
}

.navigation>ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: purple;
}

.panel {
  transform: scale(1, 0);
  transform-origin: top;
  transition-duration: 0.2s;
  width: 100%;
  position: absolute;
  top: 100%;
  background-color: lime;
}

.button:hover .panel {
  transform: scale(1);
}



/* Content Animation */

.parent{
 margin-top: 5%;
 height: 10%;
 width: 100%;
 float: left;
 position: relative;
}
 
.content1{
 height: 100%;
 width: 100%;
 background-color: blue;
 float: left;
 position: absolute;
}
 
 .content2{
 height: 100%;
 width: 100%;
 background-color: red;
 float: left;
 animation-delay: 1s;
  position: absolute;
}
 
 .content3{ 
 height: 100%;
 width: 100%;
 background-color:yellow;
 float: left;
 animation-delay: 2s;
 position: absolute;
}
 
.content4{
 height: 100%;
 width: 100%;	
 background-color: green;
 float: left;
 animation-delay: 3s;
 position: absolute;
}
 
.content5{
 height: 100%;
 width: 100%;
 background-color: lime;
 float: left;
 animation-delay: 4s;
}


.parent div {
 animation-name: animation_01;
 animation-duration:5s;
 animation-iteration-count:infinite;
 animation-fill-mode: forwards;
 opacity:0;
 }

@keyframes animation_01 {
  12.5% {
    opacity: 1
  }
  0%, 25%, 100% {
    opacity: 0
  }
}

<div class="header">	
  <nav class="navigation"> 
    <ul>
    <li class="button"> 1.0 Main Menu 
      <ul class="panel">
        <li> 1.1 Sub Menu </li>
        <li> 1.2 Sub Menu </li>
      </ul>
    </li>
    </ul>
  </nav>     
</div>	


<div class="parent">
	<div class="content1">Here goes content1</div>
	<div class="content2">Here goes content2</div>
	<div class="content3">Here goes content3</div>
	<div class="content4">Here goes content4</div>
	<div class="content5">Here goes content5</div>
 </div>

正如您在注释中看到的那样，代码分为两部分：

第1部分： Navigation和panel，当悬停button时显示子菜单。
第2部分：使用CSS animation自动content keyframes。

两个部分都可以正常工作。

---

现在，我的问题是内容的animation溢出了panel的{​​{1}}，这是由navigation的{​​{1}}位置引起的。但是，我需要这个absolute位置才能使动画生效，因为我希望animation到absolute彼此重叠显示。

另一方面，我还希望content1不会溢出content5。

您知道我如何解决这个难题吗？

Answer 1

您将导航放置在固定位置，因此，如果缩放比例，它不会影响页面中的其他元素（示例中的动画元素）。

您需要将其放置在没有固定位置的位置。另外，您不能使用比例变换，因为以后对其进行缩放不会影响父级的高度。您可以将height: 0px用作默认状态，并将height: unset悬停。

这是一个例子：

/* Header & Naviagtion */
.header {
  width: 100%;
}

.navigation {
  width: 100%;
  height: 100%;
}

.button {
  width: 100%;
  background-color: purple;
}

.navigation>ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.panel {
  max-height: 0px;
  overflow: hidden;
  transform: scale(1, 0);
  transform-origin: top;
  transition-duration: 0.2s;
  background-color: lime;
}

.button:hover .panel {
  max-height: unset;
  transform: scale(1);
}


/* Content Animation */

.parent {
  margin-top: 5%;
  height: 10%;
  width: 100%;
  float: left;
  position: relative;
}

.content1 {
  height: 100%;
  width: 100%;
  background-color: blue;
  float: left;
  position: absolute;
}

.content2 {
  height: 100%;
  width: 100%;
  background-color: red;
  float: left;
  animation-delay: 1s;
  position: absolute;
}

.content3 {
  height: 100%;
  width: 100%;
  background-color: yellow;
  float: left;
  animation-delay: 2s;
  position: absolute;
}

.content4 {
  height: 100%;
  width: 100%;
  background-color: green;
  float: left;
  animation-delay: 3s;
  position: absolute;
}

.content5 {
  height: 100%;
  width: 100%;
  background-color: lime;
  float: left;
  animation-delay: 4s;
}

.parent div {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes animation_01 {
  12.5% {
    opacity: 1
  }
  0%,
  25%,
  100% {
    opacity: 0
  }
}

<div class="header">
  <nav class="navigation">
    <ul>
      <li class="button"> 1.0 Main Menu
        <ul class="panel">
          <li> 1.1 Sub Menu </li>
          <li> 1.2 Sub Menu </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>


<div class="parent">
  <div class="content1">Here goes content1</div>
  <div class="content2">Here goes content2</div>
  <div class="content3">Here goes content3</div>
  <div class="content4">Here goes content4</div>
  <div class="content5">Here goes content5</div>
</div>