Jump to content

divinedesigns1
 Share

Recommended Posts

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>
Link to comment
Share on other sites

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 by dsonesuk
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...