1
私はアニメーション化したい要素を持っていますが、高さを増やさなければなりませんが、アニメーションが起きると高さが下がります。どうすれば元に戻すことができますか？CSSのアニメーションは、高さを下げるのではなく上に移動する
ここでは例です：
https://jsfiddle.net/sppp7jdv/
コードを例に：あなたはあなたの要素のtop位置を適応させる必要がありますその場合は
$(".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