Question

我正在尝试使用CSS为元素的height属性设置动画，但是我希望从中心开始。下面是我的代码，但是它从底部改变高度。

.toggle {
  position: absolute;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s;
}

@-webkit-keyframes height {
  from {
    height: 60px;
  }
  to {
    height: 10px;
  }
}

<div class="toggle">
  <div class="left-border"></div>
</div>

这里是JSFIDDLE

Answer 1

只需将top: 75px添加到关键帧，因为height的更改为50px。您想将height的尺寸减小{em> 25px 或从侧面的一半（ top 和 bottom ）减小一半，以达到所需的{{ 1}}。因此 50px / 2 + 10px = top: 50px：

top: 75px

.toggle {
  position: absolute;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 50px; /* starting position from the top */
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #f00;
  animation: height 2s;
}

@-webkit-keyframes height {
  to {height: 10px; top: 75px} /* + ending position from the top */
}

从CSS3的中心过渡HTML元素

1 个答案: