Question

我正在尝试制作音频动画。这段代码有什么问题？我试图将转换更改为规模，但它不起作用。有人能给我一些动画练习的链接吗？

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%, 75%, 100% {
    height: 5px;
    transform: translateY(0px);
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background-color: palevioletred;
  }
}

<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>

wave，代码正在运行，但它不会显示为wave

Answer 1

您可以通过设置transform property的动画而不是元素的高度来移除元素的上下移动。

您可以使用scaleY（）函数使元素在Y轴（高度）上增长。

示例：

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
div {
  width: 400px;
  height: 200px;
  margin: 50px auto;
}
span {
  display: inline-block;
  background-color: green;
  width: 20px;
  height: 20px;
  animation: wave 2s linear infinite;
}
.a1 {
  animation-delay: 0s;
}
.a2 {
  animation-delay: .2s;
}
.a3 {
  animation-delay: .4s;
}
.a4 {
  animation-delay: .6s;
}
.a5 {
  animation-delay: .8s;
}
@keyframes wave {
  0%, 50%{
    transform: scaleY(1);
  }
  25% {
    transform: scaleY(4);
    background-color: palevioletred;
  }
}

<div>
  <span class="a1"></span>
  <span class="a2"></span>
  <span class="a3"></span>
  <span class="a4"></span>
  <span class="a5"></span>
</div>

制作波浪动画

1 个答案: