如何从顶部制作css动画？

Question

伙计们，我想从顶部制作动画？我该怎么办？

#box {
  width:50px;
  height:300px;
  background:#272822;
  position:relative;
  animation:box 1s linear infinite;
  top:0;
}
@keyframes box {
  from {height:200px;}
  to {height:250px;}
}

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

我能做到吗？

Answer 1

你可以通过设置margin-top而不是height来设置它。

#box {
  width:50px;
  background:#272822;
  animation:box 1s linear infinite;
  padding: 0;
  margin: 0;
}
@keyframes box {
  from {height: 250px; margin-top: 10px;}
  to {height: 200px; margin-top: 60px;}
}

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

Answer 2

如果您只想从顶部（限制）开始，请将'从高度'更改为0 ......

#box {
  width:50px;
  height:150px;
  background:#272822;
  position:relative;
  animation:box 1s linear infinite;
  top:0;
}
@keyframes box {
  from {height:0px;}
  to {height:150px;}
}

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