animation help please

[divinedesigns1]

hi im trying to use this animation function in css, but instead of pushing the element from this -----> direction, i would like to push it from this <----- direction, how do i go about doing this? i try using negative values but it didnt do what i wish

 

i am using the w3school example to do this

div {    width: 100px;    height: 100px;    background: red;    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */    animation: myfirst 5s;}/* Chrome, Safari, Opera */@-webkit-keyframes myfirst {    from {width:0%;}    to {width:50%;}}/* Standard syntax */@keyframes myfirst {    from {width:50%;}    to {width:0%;}}</style>

[dsonesuk]

Push? widen or move?

Widen : As by default elements stick to left, you have to force it right using float or positioning and use right:0; so now it widens from right edge;

move: again position: relative; with left: property, and margin to bring box into view when using left: 100% from right edge.

div {position: relative;left:0;margin-left:0;width: 100px;height: 100px;background: red;-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */animation: myfirst 5s;}/* Chrome, Safari, Opera */@-webkit-keyframes myfirst {from {left:100%; m@rgin-left; -100px;}/* wish this stupid friggin system stop removing ; its friggin annoying */to {left:0;margin-left:0;}}/* Standard syntax */@keyframes myfirst {from {left:100%; m@rgin-left; -100px;} /* wish this stupid friggin system stop removing ; its friggin annoying */to {left:0;margin-left:0;}}

For some stupid reason i can't add m@rgin-left; -100px; where @ = 'a'.

Edited October 20, 2014 by dsonesuk

[divinedesigns1]

Push? widen or move?

Widen : As by default elements stick to left, you have to force it right using float or positioning and use right:0; so now it widens from right edge;

move: again position: relative; with left: property, and margin to bring box into view when using left: 100% from right edge.

div {position: relative;left:0;margin-left:0;width: 100px;height: 100px;background: red;-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */animation: myfirst 5s;}/* Chrome, Safari, Opera */@-webkit-keyframes myfirst {from {left:100%; m@rgin-left; -100px;}/* wish this stupid friggin system stop removing ; its friggin annoying */to {left:0;margin-left:0;}}/* Standard syntax */@keyframes myfirst {from {left:100%; m@rgin-left; -100px;} /* wish this stupid friggin system stop removing ; its friggin annoying */to {left:0;margin-left:0;}}

For some stupid reason i can't add m@rgin-left; -100px; where @ = 'a'.

not really this, i wanted the div width to slide out, like the first example i give, so the theme would be something like this <-- || --> where the arrows is how the divs slides out

[dsonesuk]

You want div width to slide out? then you talk about DIVS sliding out? ????? as soon as you know what you really want, let us know will you.

[divinedesigns1]

You want div width to slide out? then you talk about DIVS sliding out? ????? as soon as you know what you really want, let us know will you.

i did stated what I wanted, I even give you an example of what I wanted to do and explained that I would like the div to be slide/push from the opposite side instead of the direction as the example is being slide/pushed

[danishwebindia]

div{width:150px; height:100px; background:red; -webkit-animation: myfirst 5s; animation: myfirst 5s;}

 

@-webkit-keyframes myfirst{

from{width:0px;}

to{width:150px}

}

 

@keyframes myfirst{

from{width:0px;}

to{width:150px;}

}

 

I think you want like this....