I'm trying to make the figures in the image go through the screen every so often and one to the left and one to the right. No matter how much I think about it, I can't get it, or they stay static, hide to the left, etc.
I have tried adding the following without success:
@-webkit-keyframes movimiento-diagonal {
from {
right: -100px;
}
to {
right: 1400px;
}
}
So that they go out not so fast and do it from time to time, I did it by decreasing
from {
left: -100px;
}
and increasing
to {
left: 1400px;
}
I don't know if there is a better way without using JavaScript, or if I had to use it, to set a certain time for them to come out, I mean.
EDIT My idea was that one image would go to the right and another to the left, moving the images forward and never backwards (backwards). I could have the option of passing through the same strip or line or that each one would go through a different one. And always forward.
body {
background: green;
}
@-webkit-keyframes movimiento-diagonal {
from {
left: -100px;
}
to {
left: 1250px;
}
}
#derecha {
-webkit-animation-name: movimiento-diagonal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/*para que vuelva a su posicion inicial */
width: 40px;
height: 40px;
background-image: image("../img/segadon.png");
color: #fff;
position: relative;
}
#izquierda {
-webkit-animation-name: movimiento-diagonal;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/*para que vuelva a su posicion inicial */
width: 40px;
height: 40px;
background-image: image("../img/segadon.png");
color: #fff;
position: relative;
}
<div id="derecha">
<img src="http://i66.tinypic.com/35n96o2.png">
</div>
<br>
<br>
<br>
<br>
<div id="izquierda">
<img src="http://i64.tinypic.com/2ia7hbr.png">
</div>
If you want the images to go in opposite directions, what you can do is give one of them a delay. If that delay is negative, then instead of delaying the start, what is done is to place the animation where it should be X time before.
I've changed the code a bit more so they always face forward: added extra steps in the CSS animation, changed the image to be the same in both, made the image rotate (off-screen) as part of the animation. I'm not completely convinced by the result but it seems to work.
Something like this:
Before you had the animation with a
to
andfrom
, that is equivalent to the initial and final state, but the animations in CSS allow to describe percentages (itfrom
would be equivalent to 0% andto
100%). So what I have done is add two more states to the animation, here I describe what they do step by step:scaleX
so there is no change of address.)step-end
it to avoid this but I have not succeeded in this one). The little man is still on the right out of sight, but now we've rotated him to face left (by changing thescaleX
value) and lowered him a bit (with thetranslateY
).And now the browser is in charge of transitioning between states (with the value of 8 seconds that I put in it) and repeating itself infinitely (as you already had it in place). It gives the impression of being the same character moving from right to left over and over...because it is actually the same character doing that :)
From what I understand (I risk not what you want) , you want them to go from one side to the other, instead of using
pixeles
can useporcentajes
%
, you can also create two animations one to go from left to right and the opposite case .One solution is to create two animations with the opposite data, so you can always manipulate each as you like.
To make it look like they are only one for each direction, you can use a delay as indicated by the previous user.
And to flip the direction of the image, having only one, use scalar only in X and in negative and you will see how it works the other way around, example:
transform: scaleX(-1)
Now as for the distance, I recommend you better use the measures relative to the viewport
vw
andvh
, since it is easier to do calculations like that, for example if you want it to scroll to more than half of the window on the X axis:150vw
and less from the middle of the window to the left:-50vw
.As seeing that they already answered your question very well, I add the following, if you want to use only one animation and control the direction or scale in a more comfortable way you can use the variables, example:
And with a single animation declared, you can manipulate using different classes la -
--distancia-inicial:
, la--distancia-final
. Even the scale, like I did.Update
I also saw that it can actually be done with a single image, because using variables is also easy to achieve, you just have to create another variable for the height, such as
--altura1
y--altura2
, and if you want this second one, what it does is that "the coming" is at the edge of the animation container, since you can also turn this into a variable, let 's say,--y:
and subtract from it the height of the image, let's say--x
. In short, there is nothing better than a visual example:Although it can also be achieved perfectly without variables, it is more dynamic, since you would only have to change the measure of the height of the container and the height and width of the image and everything else calculates itself. successes!