从CSS3的中心过渡HTML元素

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

您可以使用transform

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

0.1666来自10px / 60px

Answer 2

干得好。 我使用动画top而不是height 。 红色的切换开关现在也需要一个“容器”，所以我只使用了您在那里的容器。 更改红色拨动开关的尺寸时，请更改外包装，而不是拨动开关元素（它将适合容器的任何宽度和高度）

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 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() 。 默认的变换原点为中心。

 .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的一半或从两侧， 顶部和底部 ，前来所需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>