@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>
通过运行上面的代码，内容的高度仅从底部开始减小，并且动画在顶部停止。但我想同等地降低底部和顶部的高度，即；动画应停止在内容的中心。
如何实现这一目标？
替代方法 -是的，我们可以通过使用来做到这一点scaleYCSS 属性但它缩小了内部内容。如下所示 -
@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>
@dommmm 的答案也是正确的。如果你不想玩定位，你也可以用 Flex 来实现。这也具有将动画 div 包装在容器中的相同方法。
这里高度固定为 250px（与动画 div 的最大高度相同）以避免页面滚动。然后将动画 div 定位到中心。
我还将顶部和底部的内边距从 10 像素减少到 0 像素，以实现 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
