animate div height without javascript

Click on this link to see the demo at work: https://jsfiddle.net/5vrkLyck/

<!DOCTYPE html>
<html>
<style>
#container {
    width: 400px;
    height: 400px;
    position: relative;
    background: yellow;
}

#animate {
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: red;
}
</style>
<body>
    <p>
        <button onclick="show()">Show</button>
        <button onclick="hide()">Hide</button>
    </p>
    <div id="container">
        <div id="animate" style="height: 10%;"></div>
    </div>
    <script>
        var height = NaN;
        var elem = undefined;
        var id = NaN;
        var height_in_percentage = NaN;
        var mode = "show"; // or hide?

        function scale_height_to(percent)
        {
            if(!isNaN(percent))
            {
                height_in_percentage = percent;
            }

            elem = document.getElementById("animate");  
            height = elem.style.height;
           
            height = parseInt(height.substring(0, height.length - 1));
            if(!isNaN(height))
            {
                id = setInterval(frame, 5);
            }
        }

        function frame() {
           
            if (height == height_in_percentage) {
                clearInterval(id);
            }
            else
            {
                if(mode == "show")
                {
                    height++;
                }
                else
                {
                    height--;
                }
                elem.style.height = height + '%';
            }
        }
       
        function show()
        {
            mode = "show";
            scale_height_to(100);
        }
        function hide()
        {
            mode = "hide";
            scale_height_to(0);
        }
    </script>
</body>
</html>
admin