Css动画，增加高度上移而不是下移

我有一个元素，我想动画，它必须增加高度，但当动画发生时，高度是向下获得的。我怎样才能恢复

下面是一个例子：

示例中的代码：

$（.triggerZone2”）。在（“单击”，函数（）{
$（“.rainbow”）.toggleClass（“rainbowed”）；
});
.triggerZone2{
宽度：200px；
高度：100px；
边框：5px纯黑；
左边距：15%；
}
.彩虹{
宽度：10%；
高度：30px；
位置：绝对位置；
z指数：-1；
排名前10%；
}
雨点{
动画名称：myframes；
动画持续时间：2秒；
动画计时功能：轻松进出；
动画延迟：0s；
动画迭代次数：1；
动画方向：正常；
动画填充模式：正向；
动画播放状态：运行；
}
@关键帧myframes{
从{
高度：0px；
}
到{
高度：400px；
}
}
.color1{
宽度：14%；
身高：100%；
背景：线性渐变（向右，白色，#FF4540，#FF4540）；
浮动：左；
}
.color2{
宽度：14%；
身高：100%；
背景色：#FF9840；
浮动：左；
}
.color3{
宽度：14%；
身高：100%；
背景色：#FFC540；
浮动：左；
}
.color4{
宽度：14%；
身高：100%；
背景色：#54C248；
浮动：左；
}
.color5{
宽度：14%；
身高：100%；
背景色：#486BBC；
浮动：左；
}
.color6{
宽度：14%；
身高：100%；
背景色：#5E49A3；
浮动：左；
}
.color7{
宽度：14%；
身高：100%；
背景：线性渐变（向右，#A266D0，#A266D0，白色）；
浮动：左；
}
雨点{
最大高度：800px；
}

使有生气
在这种情况下，您需要调整元素的
顶部位置。
以JSFIDLE为例，
.rainbow
的CSS代码和
关键帧将是：

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

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

在这种情况下，您需要调整元素的
顶部
位置。
以JSFIDLE为例，
.rainbow
的CSS代码和
关键帧将是：

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

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

或者你可以试试


$（.triggerZone2”）。在（“单击”，函数（）{
$（“.rainbow”）.toggleClass（“rainbowed”）；
});
.triggerZone2{宽度：200px；高度：100px；
边框：5px纯黑色；左边距：15%；}
彩虹{宽度：10%；高度：30px；位置：绝对；z指数：-1；底部：10%；}
雨点{
动画名称：myframes；
动画持续时间：2秒；
动画计时功能：轻松进出；
动画延迟：0s；
动画迭代次数：1；
动画方向：正常；
动画填充模式：正向；
动画播放状态：正在运行；}
@关键帧myframes{
从{
高度：0px；
}到{
高度：400px；
}
}
.color1{宽度：14%；高度：100%；背景：线性渐变（向右，白色，#FF4540，#FF4540）；浮动：左；}
.color2{宽度：14%；高度：100%；背景色：#FF9840；浮动：左；}
.color3{宽度：14%；高度：100%；背景色：#FFC540；浮动：左；}
.color4{宽度：14%；高度：100%；背景色：#54C248；浮动：左；}
.color5{宽度：14%；高度：100%；背景色：#486BBC；浮动：左；}
.color6{宽度：14%；高度：100%；背景色：#5E49A3；浮动：左；}
.color7{宽度：14%；高度：100%；背景：线性渐变（向右，#A266D0，#A266D0，白色）；浮动：左；}
雨点{
最大高度：800px；
}

使有生气
或者您可以试试


$（.triggerZone2”）。在（“单击”，函数（）{
$（“.rainbow”）.toggleClass（“rainbowed”）；
});
.triggerZone2{宽度：200px；高度：100px；
边框：5px纯黑色；左边距：15%；}
彩虹{宽度：10%；高度：30px；位置：绝对；z指数：-1；底部：10%；}
雨点{
动画名称：myframes；
动画持续时间：2秒；
动画计时功能：轻松进出；
动画延迟：0s；
动画迭代次数：1；
动画方向：正常；
动画填充模式：正向；
动画播放状态：正在运行；}
@关键帧myframes{
从{
高度：0px；
}到{
高度：400px；
}
}
.color1{宽度：14%；高度：100%；背景：线性渐变（向右，白色，#FF4540，#FF4540）；浮动：左；}
.color2{宽度：14%；高度：100%；背景色：#FF9840；浮动：左；}
.color3{宽度：14%；高度：100%；背景色：#FFC540；浮动：左；}
.color4{宽度：14%；高度：100%；背景色：#54C248；浮动：左；}
.color5{宽度：14%；高度：100%；背景色：#486BBC；浮动：左；}
.color6{宽度：14%；高度：100%；背景色：#5E49A3；浮动：左；}
.color7{宽度：14%；高度：100%；背景：线性渐变（向右，#A266D0，#A266D0，白色）；浮动：左；}
雨点{
最大高度：800px；
}

使有生气
非常感谢，这正是我需要的。非常感谢，这正是我需要的。