Css animation, increase height move up instead of down -

i have element want animate, has increase in height, when animation happens, height gained downwards. how can revert that?

here's example:

https://jsfiddle.net/sppp7jdv/

the code in example:

 $(".triggerzone2").on("click", function() {     $(".rainbow").toggleclass("rainbowed");   });

.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 {    {      height: 0px;    }    {      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/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>

in case need adapt top position of element. example on jsfiddle css code .rainbow , keyframe be:

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