I want to have an animation that starts in the center but loops infinitely. As you can see in the snippet the cubes first start in the center, dispersed evenly across the width, but what I want is that the moment the cube leaves the screen on the left, it starts back at the right, so it is seamless. Anyone knows how to do this?
Here's the code:
#skillIcon {
animation: moveLeft 5s linear infinite;
width:100px;
height:100px;
background-color:#444;
align-items:center;
position:relative;
}
@-webkit-keyframes moveLeft {
from {
right: -30%;
}
to {
right: 100%;
}
}
#parentDiv{
background-color:#222;
display:flex;
position:relative;
justify-content:space-between;
align-items:center;
}<div id="parentDiv">
<div id="skillIcon">
</div>
<div id="skillIcon">
</div>
<div id="skillIcon">
</div>
</div>you're on the right track, the keys frames is the trick
@keyframes example {
0% {left:50%;}
50% {left:-30%;}
50.01% {left:130%;}
100% {left:50%;}
}
div {
width: 10px;
height: 10px;
position: relative;
left:50%;
background-color: red;
animation: example 4s linear infinite;
}
edited:
I found a better solution Using just 2 keyframes and setting delay you can have it start anywhere on the screen.
@keyframes example {
0% {left:110%;}
100% {left:-10%;}
}
div {
width: 10px;
height: 10px;
position: relative;
left:0%;
background-color: red;
animation: example 4s linear infinite;
}
then ethier in css on on the div itself set a delay -2 secs on a 4 secs loop will start in the centre of element.
<div style="animation-delay:-2s"/>