css - CSS：如何让元素的高度保持在最终的动画高度？

Question

当我为下面的高度之类的属性设置动画时，一旦动画完成，它就会重新回到不同的高度或没有高度。我尝试过设置height: auto，以便我可以保持在 100%，但这似乎没有任何作用。不确定我缺少什么，以便在动画结束时保留属性的值。

.parent {
    animation: expand 3s 1;
}

@keyframes expand {

   from {
     width: 0%;
     height: 0%;
   }

    to {
      width: 50%;
      height: 100%;

    }

  }

<div class="parent" style="background-color: red;">


 </div>

标签： css

Answer 1

使用animation-fill-mode: forwards. 这将使动画的最终值在动画结束后保持不变。

在您的情况下，只需附加forwards到animation速记。