双向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>

通过运行上面的代码，内容的高度仅从底部下降，动画在顶部停止。但是我想从底部和顶部等量地降低高度;动画应该停在内容的中心。

如何做到这一点?

备用方法-是的，我们可以通过使用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>

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>

Answer 2

使用clip-path的另一个想法是不需要处理高度

@keyframes mgm {
to {
clip-path: inset(50% 0);
}
}
.mgm {
width: 180px;
border: 1px solid black;
padding: 10px;
animation: mgm 1s ease-in-out infinite alternate;
clip-path: inset(0 0);
}

<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>

要获得边框效果，可以考虑使用如下的伪元素:

.mgm {
width: 180px;
padding: 10px;
animation: mgm 1s linear infinite alternate;
clip-path: inset(0 0);
position: relative;
}
@keyframes mgm {
to {
clip-path: inset(50% 0);
}
}
.mgm:before {
content: "";
position: absolute;
border: 1px solid black;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 1px 0;
animation: inherit;
animation-name: mgm-b;
}
@keyframes mgm-b {
to {
margin: 50% 0;
}
}

<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>

如果不需要透明度，可以使用pseudo元素:

.mgm {
width: 180px;
padding: 10px;
position: relative;
overflow:hidden;
}
.mgm:before {
content: "";
position: absolute;
border: 1px solid black;
box-shadow:0 0 0 200vmax #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 1px 0;
animation: mgm 1s linear infinite alternate;
}
@keyframes mgm {
to {
margin: 50% 0;
}
}

<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 3

要达到这种效果，您需要将文本放置在子容器中并对其进行绝对定位。以这种方式收缩父div不会收缩内部内容。

@keyframes mgm {
from {
transform: translateY(0%);
height: 150px; /* original container height */
}
to {
transform: translateY(75px); /* 50% of original container height */
height: 0px;
}
}
.mgm {
width: 50%;
border: 1px solid black;
animation: mgm 1s ease-in-out;
height: 150px;
overflow: hidden;
position: relative;
}
.mgm p {
position: absolute;
margin: 10px;
top: 50%;
transform: translateY(-50%);
max-height: 150px;
max-width: 100%;
}

<div class="mgm">
<p>
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!
</p>
</div>