从 CSS3 中的中心过渡 HTML 元素

Question

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

.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 而不是 height。红色切换现在也需要一个 'container'，所以我只使用了你那里的那个。当改变红色切换的尺寸时，改变外包装，而不是切换元素（它会适合任何容器，宽度和高度）

https://jsfiddle.net/j2refncs/7/

.toggle {
  width: 20px;
  height: 40px;
  background: #ccc;
  position: relative;

  .left-border {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 200px;
    background-color: #ff0000;
    animation: height 2s;
  }
}

@-webkit-keyframes height {
  from {
    top: 0;
  }
  to {
    top: 30px;
  }
}

Answer 2

您可以使用transform

from {
}
to {
  transform: scaleY(0.1666);
}

0.1666 来自 10px / 60px

Answer 3

您可以使用 height 为 top 设置动画，使高度变化从中心显示：

.toggle {
  position: relative;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s forwards;
}

@keyframes height {
  from {
    top: 25px;
    height: 60px;
  }
  to {
    top: 50px;
    height: 10px;
  }
}

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

也可以用transform: scaleY() in the animation. The default transform origin为中心

.toggle {
  position: relative;
  width: 400px;
  height: 200px;
  background: #ccc;
}

.left-border {
  position: absolute;
  top: 25px;
  left: 10px;
  width: 20px;
  height: 60px;
  border-radius: 200px;
  background-color: #ff0000;
  animation: height 2s forwards;
}

@keyframes height {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.167);
  }
}

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

Answer 4

只需将 top: 75px 添加到 关键帧 ，因为 height 的变化是 50px。您想将 height 减少 25px 或从两侧减少一半，top 和 bottom, 达到想要的 10px。所以 50px / 2 + 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 */
}

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

从 CSS3 中的中心过渡 HTML 元素

Transition HTML element from center in CSS3

html

css

css-transitions

css-animations