Css Animation, Höhe erhöhen nach oben statt nach unten

Question

Ich habe ein Element, das ich animieren möchte, es muss in der Höhe zu erhöhen, aber wenn die Animation passiert, wird die Höhe nach unten gewonnen. Wie kann ich das wiederherstellen?

Hier ist ein Beispiel:

https://jsfiddle.net/sppp7jdv/

Der Code im Beispiel:

$(".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 1

In diesem Fall müssen Sie die top Position Ihres Element anzupassen . Für Ihr Beispiel auf JSFiddle der CSS-Code für .rainbow und die keyframe wäre:

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

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

Answer 2

Oder vielleicht können Sie

$(".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; bottom: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/1.9.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>

Prost versuchen!