CSS3 transition for element dimensions not working from percentage to pixel size

I am building a single page website which shows a vector graphic of 80% screen width on the ‘start screen’. Once the user scrolls down, the graphic transitions to a navigation bar at the top of the page and shall receive a hight of 50px. The transition from large to small dimensions should be animated with CSS3 transitions.

However, CSS transistions seem to not work when scaling an element from a percent value to a fixed pixel value and vice versa. I’ve made a jsfiddle to demonstrate the effect. While the height of the div transitions well, the width is not animated at all.

Using pixel widths for the initial size of the image is not an option for responsive design reasons. The code:

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        html, body{
            background-color: #010101;
            height: 100%;
        }
        .navbar--logo-item{
            background-color: #fff;
            height: 10px;
            width: 80%
            -moz-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        .navbar--logo-item.small{
            height: 50px;
            width: 200px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#toggle').click(function(){
                $('.navbar--logo-item').toggleClass('small');
            });
        });
    </script>
</head>
<body>
    <div class="navbar--logo-item"></div>
    <button id="toggle">
        Toggle Logo
    </button>
</body>
</html>


Source: css3

Leave a Reply