Css动画，增加高度而不是向下移动

Question

我有一个我要动画的元素，它必须增加高度，但是当动画发生时，高度会向下增加。我怎样才能恢复呢？

以下是一个例子：

https://jsfiddle.net/sppp7jdv/

示例中的代码：

＆＃13;

＆＃13;

 $(".triggerZone2").on("click", function() {
   $(".rainbow").toggleClass("rainbowed");
 });

＆＃13;

.triggerZone2 {
  width: 200px;
  height: 100px;
  border: 5px solid black;
  margin-left: 15%;
}
.rainbow {
  width: 10%;
  height: 30px;
  position: absolute;
  z-index: -1;
  top: 10%;
}
.rainbowed {
  animation-name: myframes;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}
@keyframes myframes {
  from {
    height: 0px;
  }
  to {
    height: 400px;
  }
}
.color1 {
  width: 14%;
  height: 100%;
  background: linear-gradient(to right, white, #FF4540, #FF4540);
  float: left;
}
.color2 {
  width: 14%;
  height: 100%;
  background-color: #FF9840;
  float: left;
}
.color3 {
  width: 14%;
  height: 100%;
  background-color: #FFC540;
  float: left;
}
.color4 {
  width: 14%;
  height: 100%;
  background-color: #54C248;
  float: left;
}
.color5 {
  width: 14%;
  height: 100%;
  background-color: #486BBC;
  float: left;
}
.color6 {
  width: 14%;
  height: 100%;
  background-color: #5E49A3;
  float: left;
}
.color7 {
  width: 14%;
  height: 100%;
  background: linear-gradient(to right, #A266D0, #A266D0, white);
  float: left;
}
.rainbowed {
  max-height: 800px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triggerZone2">
  <h1>
           Animate
         </h1>
</div>

<div class="rainbow">
  <div class="color1">
  </div>
  <div class="color2">
  </div>
  <div class="color3">
  </div>
  <div class="color4">
  </div>
  <div class="color5">
  </div>
  <div class="color6">
  </div>
  <div class="color7">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在这种情况下，您需要调整元素的top位置。 对于JSFiddle上的示例，.rainbow和keyframe的CSS代码将是：

.rainbow{ width:10%; height:30px; top:370px; position:absolute; z-index: -1; }

@keyframes myframes {
  from {
    height:0px;
    top: 400px;
  } to {
    height:400px;
    top:0px;
 }
}

Answer 2

或许你可以试试

.triggerZone2{width:200px; height:100px;
border:5px solid black;  margin-left:15%;}


.rainbow{ width:10%; height:30px;  position:absolute; z-index: -1; bottom:10%; }
  
.rainbowed {
  animation-name:myframes; 
  animation-duration:  2s;
  animation-timing-function: ease-in-out;
  animation-delay:0s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;}

@keyframes myframes {
  from {
    height:0px;
  } to {
    height:400px;
 }
}








.color1{width:14%; height:100%; background: linear-gradient(to right, white, #FF4540, #FF4540); float:left;}
.color2{width:14%; height:100%; background-color:#FF9840; float:left;}
.color3{width:14%; height:100%; background-color:#FFC540; float:left; }
.color4{width:14%; height:100%; background-color:#54C248; float:left;}
.color5{width:14%; height:100%; background-color:#486BBC; float:left;}
.color6{width:14%; height:100%; background-color:#5E49A3; float:left;}
.color7{width:14%; height:100%;  background: linear-gradient(to right, #A266D0,#A266D0, white); float:left;}

.rainbowed  {
 max-height: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="triggerZone2">
    <h1>
    Animate
    </h1>
        </div>
   
   <div class="rainbow">
      <div class="color1">
      </div>
      <div class="color2">
      </div>
      <div class="color3">
      </div>
      <div class="color4">
      </div>
      <div class="color5">
      </div>
      <div class="color6">
      </div>
      <div class="color7">
      </div>
    </div>

{{1}}

干杯！