CSS hover box

CSS hover box transition 踩坑指南, display: none; 作为初始状态，不会产生动画效果，必须设置 height: 0; 或 width: 0; 来实现隐藏!

CSS hover box

transition 踩坑指南, display: none; 作为初始状态，不会产生动画效果，必须设置 height: 0; 或 width: 0; 来实现隐藏!

transition

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
position: relative;
}

ul {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 50vw;
margin: 0 auto;
background: #fff;
border: 1px solid red;
padding: 10px;
}
ul>li {
list-style: none;
width: 100px;
height: 30px;
background: #ccc;
color: #0f0;
text-align: center;
/* text-decoration: underline; */
}

a{
text-decoration: none;
}

.link {
color: #f0f;
}

.link:hover{
color: #0f0;
}

.link + .hover-box,
.hover-box {
position: fixed;
display: block;
/* display: none; */
/* visibility: hidden; */
height: 0;
width: calc(100vw);
background: #000;
color: #fff;
top: 80px;
left: 0;
right: 0;
/* margin-top: 100px; */
overflow: hidden;
margin: 0;
padding: 0;
  // transition: height 2s .5s ease-in-out;
transition: height 2s .5s ease-out;
}
/* .hover-box > p {
  height: 0;
} */



.link:hover + .hover-box,
.hover-box:hover {
transition: height 2s .5s ease-in;
height: 200px;
  // animation: hover-animation 2s .5s ease-in-out;
  // padding: 30px;
  // transition: 
  //   height 2s .5s ease-in-out, 
  //   padding-top 2s .5s ease-in-out,
  //   padding-bottom 2s .5s ease-in-out;
}

/* .hover-box:hover > p {
  height: auto;
} */

/* .link:hover + .hover-box,
.hover-box:hover {
  width: calc(100vw);
  height: 200px;
  background: #000;
  transition: height 1s .5s ease-in-out;
  color: #fff;
  padding: 30px;
} */

/* animation: 2s linear hover-animation 1s; */
/* animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state. */

@keyframes hover-animation {
0% {
height: 0px;
  }
25% {
height: 25px;
  }
50% {
height: 50px;
  }
75% {
height: 75px;
  }
100% {
height: 100px;
  }
}

demo

See the Pen <a href="https://codepen.io/xgqfrms/pen/NWRaXoN">hover box</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

---

xgqfrms