css3 animation movement problem

[tamoti]

****
Nobody has replied yet and I’m worried it’s because TLDR. So i’m trying to explain my problem better and shorter (between the * signs) so that you wont have to read the whole code.

if you want to animate something in css3 you have to fill in a color, position left and a position top.
example:

@keyframes moveIt

{

0%   {background:transparent; left:0%; top:-442px;}

100% {background:transparent; left:0%; top:0px;}

}

in my animation it only needs to go down, so I only need to use the top property. But if i leave out the color and the left position it wont work. The code expects background:a color, left starting position, top starting position;
How can I make it that i only have to fill in the top? Or can i fill in something that does nothing at color and left position like left:none or inherit (i’ve tried them and they didn’t work) or something like that?
***

I have this image inside a div-tag. I used css3 to make the image move from the top of the screen down.
The animation works, my only problem is that it ignores the position of the div-tag it’s in. The div tag has a 960px width and a margin auto. The image comes scrolling down at the left of the screen and when the animation is over it sets itself to the right horizontal position, but it should do that from the start.

this is my code:

the html code:

normal css code:

.lightBoxWrapper{

width:960px;

margin:auto;

}



#hand2{

position:fixed;

margin-left:0px;

z-index:5;

}

for the animation

.CSS3animation      /* name of the class that's on my image*/

{

animation:moveIt 1s;

-moz-animation:moveIt 1s; /* Firefox */

-webkit-animation:moveIt 1s; /* Safari and Chrome */

}



@keyframes moveIt

{

0%   {background:transparent; left:0%; top:-442px;}

100% {background:transparent; left:0%; top:0px;}

}



@-moz-keyframes moveItverplaats /* Firefox */

{

0%   {background:transparent; left:0%; top:-442px;}

100% {background:transparent; left:0%; top:0px;}

}



@-webkit-keyframes moveIt /* Safari and Chrome */

{

0%   {background:transparent; left:0%; top:-442px;}

100% {background:transparent; left:0%; top:0px;}

}

javascript/jquery code:

[Author]

Posts