CSS animation - How to fill in “starting from border”?


Tags: html,css,web,css-animations

Problem :

Quite a simple question, really, however I could not find anything online.

Basically, how do you animate a fill-in with a specific color of an element starting at the border?

E.g the border gets bigger and bigger until the shape is filled.



Solution :

If I understand your question you want to animate the border-width of the element, maybe the border-top-width, but I don't think that will create the effect that you are looking for, increasing the border will only push the element as much as the border width gets set to, it won't look like if the element is being filled, you can animate a nested element that will cover the outer element, you can check this example to see what I'm saying

The 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>

The javascript:

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

    CSS Howto..

    How do I fix Zurb Foundation dropdown issue on mobile devices?

    How to get the real font name of a div on a web page when it set css font-family?

    How to find the css, color codes and other coding a site uses

    How to get page-header and nav-pills to appear on the same line

    Two DIVs inside DIV. How to auto-fill the space of parent DIV by second DIV?

    How can i get List items to stay together using CSS?

    CSS: How to create special shape

    How to change button CSS attributes

    How do I enlarge images on a web page

    How to set CSS attributes relative to a parent node?

    How to embed Javascript in CSS?

    How can I center the nav menu items using bootstrap 3?

    How To Add CSS & JavaScript Into Windows Form Application C#.net

    How to hide a div off the viewport responsively, and always showing the bottom 50px?

    How to hide elements with css using checkboxes: different outputs according to element id or class?

    Slideshow Glitch - Debugging Assistance

    How can I add my own CSS styles to CKEditor

    How to handle javascript & css files across a site?

    How to make angular material dialog box work in IE10

    How can I wrap content around a UL CSS Menu so content is seamless?

    how to put css in selected row in angular js?

    How do I break the border around text in css?

    How do I change phpmyadmin font size for sql query box?

    How or where to add javascript settimeout function to CSS vertical drop down menu

    How can I apply CSS to a JPG server-side?

    How to apply different image styles to the same image used on main html page and pop up modal

    How to center this stuff inside a link using CSS?

    How to change the border of an element when selected?

    How to keep Div rotated with css after flip?

    How to format an HTML table using CSS for printing?