html - 双向 CSS 高度动画

Question

@keyframes mgm {
  from {
    max-height: 250px;
  }
  
  to {
    max-height: 0px;
  }
}
  
.mgm {
    width: 180px;
    border: 1px solid black;
    padding: 10px;
    animation: mgm 1s ease-in-out;
    max-height: 250px;
    overflow:hidden;
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, 
  blanditiis qui porro possimus commodi laudantium voluptatum accusantium. 
  Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur 
  asperiores fugiat ducimus!
</div>

通过运行上面的代码，内容的高度仅从底部开始减少，动画在顶部停止。但我想从底部和顶部平均降低高度，即；动画应该停在内容的中心。

如何做到这一点？

替代方法 -是的，我们可以通过使用 scaleY CSS 属性来做到这一点，但它会缩小内部内容。如下-

@keyframes mgm {
  from {
    transform:scaleY(1);
  }
  
  to {
    transform:scaleY(0);
  }
}
  
.mgm {
    width: 180px;
    border: 1px solid black;
    padding: 10px;
    animation: mgm 1s ease-in-out;
    max-height: 250px;
    overflow:hidden;
}

<div class="mgm">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, 
  blanditiis qui porro possimus commodi laudantium voluptatum accusantium. 
  Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur 
  asperiores fugiat ducimus!
</div>

Answer 1

@dommmm 的回答也是正确的。如果您不想玩定位，也可以使用 flex 来实现。这也具有将动画 div 包装在容器中的相同方法。这里高度固定为 250px(与动画 div 的最大高度相同)以避免页面滚动。然后将动画 div 定位到中心。我还将顶部和底部的填充从 10px 减少到 0px，以实现 div 完全关闭。

.animation-container {
      display: flex;
      align-items: center;
      height: 250px;
    }

@keyframes mgm {
  from {
    max-height: 250px;
    padding: 10px 10px;
  }
  to {
    max-height: 0px;
    padding: 0px 10px;
  }
}

.animation-container {
  display: flex;
  align-items: center;
  height: 250px;
}

.mgm {
  width: 180px;
  border: 1px solid black;
  padding: 10px;
  animation: mgm 1s ease-in-out alternate infinite;
  max-height: 250px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

<div class="animation-container">
  <div class="mgm">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, blanditiis qui porro possimus commodi laudantium voluptatum accusantium. Maxime alias dolorum quo aliquam delectus qui illo officiis, consequuntur asperiores fugiat ducimus!
  </div>
</div>