Sergi Sergi - 1 month ago 17
CSS Question

Css animation, increase height move up instead of down

I have an element that I want to animate, it has to increase in height, however when the animation happens, the height is gained downwards. How can I revert that?

Here's an example:

https://jsfiddle.net/sppp7jdv/

The code in the 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 {
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/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>




Answer

In that case you would need to adapt the top position of your element. For your example on JSFiddle the CSS code for .rainbow and the keyframe would be:

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

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