1
我有一個元素，我想動畫，它必須增加高度，但是當動畫發生時，高度是向下獲得的。我該如何恢復？Css動畫，增加高度而不是降低
下面是一個例子：
https://jsfiddle.net/sppp7jdv/
例子中的代碼：
$(".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>
非常感謝你，這就是我所需要的。 – Sergi