影响底部的 div 高度上的关键帧动画答案

【问题标题】：Keyframe Animation on Div Height Affecting Bottom影响底部的 div 高度上的关键帧动画
【发布时间】：2016-11-25 09:33:11
【问题描述】：

我正在制作一个看起来像水平声音可视化器的简单 CSS 动画。当我一直在研究前三个水平条时，我注意到在为 div 的高度设置动画时，只有底部受到影响。

有什么办法可以扭转这种动画效果？

CSS：

body{
  background-color: #283739;
}
.container {
  width: 200px;
  margin: 10em auto;
}
@keyframes line {
  50% {height: 120px}
}
@keyframes line2 {
  50% {height: 122px}
}
@keyframes line3 {
  50% {height: 123px}
}
.box1{
  width: 20px;
  height: 100px;
  background-color: #F5F5F5;
  float: left;
  margin: 5px;
  box-shadow: 5px 5px 2px #001F39;
  animation: line 0.7s linear 0s infinite;
}
.box2{
  width: 20px;
  height: 100px;
  background-color: #A9C52F;
  float: left;
  margin: 5px;
  box-shadow: 5px 5px 2px #001F39;
  animation: line2 0.5s linear 0s infinite;
}
.box3{
  width: 20px;
  height: 100px;
  background-color: #F5F5F5;
  float: left;
  margin: 5px;
  box-shadow: 5px 5px 2px #001F39;
  animation: line3 0.8s linear 0s infinite;
}

这是codepen.io 链接。

【问题讨论】：

答案是否解决了您的问题？如果是，请考虑将其标记为已接受。

标签： css height css-animations keyframe

【解决方案1】：

高度动画：（您的原始代码）

在您给出的代码中，您正在为元素的height 设置动画。默认情况下，当高度为动画时，由于文档的流动方式，元素将从上到下增长。

为了达到相反的效果，您必须绝对相对于父元素定位div[class^="box"]（类以div 开头的所有div 元素）元素。完成后，所有的高度变化都会从下向上增长，因此你最终会得到相反的效果。

以下是我添加的属性的摘录（仅我添加的那些，请参阅 sn-p 以获得完整演示）：

.container {
  position: relative;
}
div[class^="box"] {
  position: absolute;
  bottom: 0px;
  margin: 5px;
}
.box1 {
  left: 0px;
}
.box2 {
  left: 20px;
}
.box3 {
  left: 40px;
}

body {
  background-color: #283739;
}
.container {
  position: relative;
  width: 200px;
  margin: 10em auto;
}
@keyframes line {
  50% {
    height: 120px
  }
}
@keyframes line2 {
  50% {
    height: 122px
  }
}
@keyframes line3 {
  50% {
    height: 123px
  }
}
div[class^="box"] {
  position: absolute;
  bottom: 0px;
  width: 20px;
  height: 100px;
  margin: 5px;
}
.box1 {
  left: 0px;
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line 0.7s linear 0s infinite;
}
.box2 {
  left: 20px;
  background-color: #A9C52F;
  box-shadow: 5px 5px 2px #001F39;
  animation: line2 0.5s linear 0s infinite;
}
.box3 {
  left: 40px;
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line3 0.8s linear 0s infinite;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

ScaleY 变换动画：（另一种，性能要求较低的方法）

产生这种效果的另一种方法是使用 CSS scaleY 变换。这里不用position，我们可以将transform-origin设置为bottom，表示在底点固定的情况下进行scaleY（即缩放高度）。

@keyframes line {
  50% {
    transform: scaleY(1.2);
  }
}
@keyframes line2 {
  50% {
    transform: scaleY(1.22);
  }
}
@keyframes line3 {
  50% {
    transform: scaleY(1.23);
  }
}
div[class^="box"] {
  float: left;
  transform-origin: bottom;
}

body {
  background-color: #283739;
}
.container {
  width: 200px;
  margin: 10em auto;
}
@keyframes line {
  50% {
    transform: scaleY(1.2);
  }
}
@keyframes line2 {
  50% {
    transform: scaleY(1.22);
  }
}
@keyframes line3 {
  50% {
    transform: scaleY(1.23);
  }
}
div[class^="box"] {
  float: left;
  transform-origin: bottom;
  width: 20px;
  height: 100px;
}
.box1 {
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line 0.7s linear 0s infinite;
}
.box2 {
  background-color: #A9C52F;
  box-shadow: 5px 5px 2px #001F39;
  animation: line2 0.5s linear 0s infinite;
}
.box3 {
  background-color: #F5F5F5;
  box-shadow: 5px 5px 2px #001F39;
  animation: line3 0.8s linear 0s infinite;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

【讨论】：