CSS3 animation direction not working


I have an extending line animation on my site using CSS3. It was created using key frames on the width of the div and naturally it seems to be expanding left to right. However i wish for it to expand from right to left. I have tried using 'reverse' in animation-direction but with no joy. Any ideas why? thanks.

Here is my fiddle http://jsfiddle.net/edrtB/


.line_left {
    height: 6px;
    width: 32vw;
    background-color: black;
    margin-top: 300px;
    margin-left: 40px;
    border-radius: 5px;
    float: left;
    -webkit-animation: expand 2s; /* Chrome, Safari, Opera */
            animation: expand 2s;

/* Chrome, Safari, Opera */
@-webkit-keyframes expand
    from {width: 0vw;}
    to {width: 32vw;}

 /* Standard syntax */
@keyframes expand
    from {width: 0vw;}
    to {width: 32vw;}

UPDATE It has been made clear, that it is hard to see what im trying to achieve. Here is an image of the site logo, and the lines need to animate from the centre outwards.


Problem courtesy of: user2336624


Your problem isn't with the animation, it's with how the element is positioned on the page; since it's float:left, it's going to stay as far to the left as possible. If you change it to float:right, it'll move as far right as possible and expand to the left.

Here's an updated version of your fiddle.

If you don't want your expanding bar on the right side of the page, you could wrap it in a containing <div> and position that however you'd like. See this new fiddle update, in which I'm centering the expanding bar by setting the container's width and giving it margin:0 auto.

Edit: If you want the fully-expanded bar to be effectively "left-floated," use the above technique of wrapping it in a <div>, setting that div's width, and floating it left, as in this new fiddle update.

Solution courtesy of: Kylok


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.