how to make a CSS animation end point the right edge of the browser

Question

i'm trying to mimic a loading function for this animation, so i want the end point of the animation to be the top right edge of the browser.

how do i do this? ie what can i replace "left:1000" with to always be the top right edge of the browser.

.square {
    width: 30px;
    height: 3px;
    background: red;
    position: relative;
    animation: colors 2s;
    -webkit-animation: colors 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes colors {
    0% {
        left: 0px;
        top: 0px;
    }

    99% {
        left: 1000px;
    }
}

@-webkit-keyframes colors {
    0% {
        left: 0px;
        top: 0px;
    }

    99% {
        left: 1000px;
    }
}

Answer 1

solution is to use both left and margin-left

JSFIDDLE DEMO

.square
{
    width: 30px;
    height: 3px;
    background: red;
    position: relative;
    animation: colors 2s;
    -webkit-animation: colors 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    top: 0px;
    margin-left:-30px;
}

@keyframes colors {
    0% {left: 30px;}
    99% { left: 100%;} 
}

@-webkit-keyframes colors {
    0% {left: 30px;}
    99% { left: 100%;} 
}

Answer 2

position:absolute; and right:0 will take you to the right edge of the browser.

.square{
    position:absolute;
}

@keyframes colors{
    from{
        left:0;
        top: 0px;
    }

    to{
        right:0;
    }
}

Answer 3

After running this, I am assuming you're trying to do something like how YouTube has that loading bar. If so, trying adding this line to your ".square" class.

top: 0px;

And then just remove the "relative" positioning, and change it to "fixed".

Hope that helps, but might not even be related to your problem.