CSSアニメーション - 「境界線から始める」方法は？

Question

本当に簡単な質問ですが、私はオンラインで何かを見つけることができませんでした。

基本的に、境界線から始まるの特定の色で塗りつぶしをアニメーション化するには、？

たとえば、図形が塗りつぶされるまで、境界線が大きくなります。

Answer 1

あなたの質問を理解していれば、要素の境界幅、おそらくborder-top-widthをアニメーション化したいが、それはあなたが探している効果を作成するとは思わない境界線の幅が設定された分だけ要素を押してください。要素が塗りつぶされているようには見えません。外側の要素を覆う入れ子要素をアニメーション化することができます。この例をチェックして、メートル

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>