Sergi Sergi - 9 months ago 61
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 Source

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;
 }
}