CSS-Animation - Wie fülle ich "von der Grenze ausgehend" aus?

Question

Eine ziemlich einfache Frage, wirklich, aber ich konnte nichts online finden.

Wie animieren Sie im Grunde ein Fill-in mit einer bestimmten Farbe eines Elements beginnend an der Grenze?

ZB der Rand wird größer und größer, bis die Form gefüllt ist.

Answer 1

Wenn ich Ihre Frage verstehe, möchten Sie die Grenze-Breite des Elements, vielleicht die Grenze-Spitze-Breite animieren, aber ich denke nicht, dass das den Effekt schaffen wird, nach dem Sie suchen, wird die Grenze erhöhen schiebe das Element nur so weit, wie die Rahmenbreite festgelegt ist, es sieht nicht so aus, als ob das Element gefüllt wird, du kannst ein verschachteltes Element animieren, das das äußere Element abdeckt, du kannst dieses Beispiel überprüfen, um zu sehen, was ich ' sage

Die HTML:

<style> 
#theBorderDiv, #theTwoDivs { 
display: inline-block; 
background-color: #CCC; 
height: 0px; 
width: 300px; 
border-top-color: red; 
border-top-style: solid; 
border-top-width: 1px; 
height: 200px; 
vertical-align: top; 
} 

#theTwoDivs{ 
    margin-top: 200px; 
    position: relative; 
} 

#theInnerDiv 
{ 
    position: absolute; 
    top:0px; 
    height: 0px; 
    width: 300px; 
    background-color: red; 
}  
</style> 
<div id="theBorderDiv"></div> 

<div id="theTwoDivs">  
<div id="theInnerDiv"></div> 
</div> 

Die javascript:

<script type="text/javascript">   
    $('#theBorderDiv').animate({borderTopWidth:200},1000) 
    $('#theInnerDiv').animate({height:200},1000) 
</script>