CSS-анимация - Как заполнить «начиная с границы»?

Question

Довольно простой вопрос, правда, однако я ничего не нашел в Интернете.

В принципе, как вы анимируете заливку с определенным цветом элемента , начинающийся с границы?

Например, граница становится больше и больше, пока форма не будет заполнена.

Answer 1

Если я понимаю ваш вопрос, вы хотите анимировать ширину границы элемента, возможно, ширину границы, но я не думаю, что создаст эффект, который вы ищете, увеличивая границу, будет просто нажимайте на элемент столько, сколько будет установлено шириной границы, оно не будет выглядеть, если элемент заполняется, вы можете анимировать вложенный элемент, который будет охватывать внешний элемент, вы можете проверить этот пример, чтобы увидеть, м говоря

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> 

Javascript:

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