如何实现CSS hover触发的从屏幕顶部外向下滑入的头部动画效果

核心问题是缺少定位属性配置，top偏移属性仅对非static定位的元素生效，你需要做以下调整：

• 给需要做位移动画的#content设置position: fixed，让它脱离文档流，偏移量相对于视口计算，才能实现从屏幕外滑入的效果
• 为了避免滑入时底部边框提前露出，默认的top偏移要把2px的边框高度也算进去，设置为-52px
• 不需要给父级#box设置top属性和对应过渡，只要保留它的高度作为hover触发区域即可

修复后完整代码 #

HTML #

<div id="box">
    <div id="content">AaronNGray</div>
</div>

CSS #

body {
  margin: 0px;
  padding: 0px;
}
#box {
  height: 100px;
  width: auto;
  background: transparent;
}
#content {
  overflow: hidden;
  width: 100%;
  background: white;
  /* 新增定位属性 */
  position: fixed;
  top: -52px;
  height: 50px;
  border-bottom: 2px solid black;
  -webkit-transition: top .8s ease;
  -moz-transition: top .8s ease;
  -ms-transition: top .8s ease;
  -o-transition: top .8s ease;
  transition: top .8s ease;
}
#box:hover > #content {
  top: 0px;
}

内容的提问来源于stack exchange，提问作者AaronNGray