css3 animation delay on right side only - html

Question

I am creating CSS3 animation to make a div move infinity from left to right.
The code is working except for when the div goes to right side, it has a delay of 3 seconds. On the left side, it is working great.
Here is my code:
#najava {
width: 197px;
height: 22px;
border-radius: 2px;
background-color: transparent;
opacity: 0.8;
font-weight: bold;
position: relative;
padding-left: 5px;
padding-right: 5px;
animation: mymove 5s linear 0s infinite alternate-reverse;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
#keyframes mymove {
0% {
left: 0px;
}
100% {
left: 200px;
}
}
#keyframes mymove {
0% {
background-color: transparent;
left: 0px;
right: 0px;
}
33% {
background-color: yellow;
left: 250px;
right: 0px;
}
66% {
background-color: blue;
left: 250px;
right: 250px;
}
100% {
background-color: green;
left: 0px;
right: 250px;
}
}
<div id="najava">
<p>text text text text text</p>
</div>

Answer 1

Here is the reason why this is happening.
Your problem lies in the fact that at 66%, nothing is happening. The left remains at 250px which makes it just stay where it's at. The animation is running as it is programmed to do.
To fix this unwanted behavior, you need to remove the 66% line and change it to a simple 0%, 50%, 100% animation.
#keyframes mymove {
0% {background-color:transparent; left:0px; right:0px;}
50% {background-color:yellow; left:250px; right:0px;}
100% {background-color:green; left:0px; right:250px;}
}
This alteration ensures that at 50%, the div is to the right, and at 100%/0%, it's all the way to the left.

Answer 2

Different organization of keyframes, maybe?
#najava {
width: 197px;
height: 22px;
border-radius: 2px;
background-color: transparent;
opacity: 0.8;
font-weight: bold;
position: relative;
padding-left: 5px;
padding-right: 5px;
animation: mymove 3s linear 0s infinite alternate-reverse;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
#keyframes mymove {
0% { left: 0px; }
100% { left: 200px; }
}
#keyframes mymove {
0% {background-color:transparent; left:0px; }
25% {background-color:yellow; left:100px; }
50% {background-color:blue; left:200px; }
75% {background-color:red; left:100px; }
100% {background-color:green; left:0px;}
}
<div id="najava">
<p>text text text text text</p>
</div>
p.s. added 5 steps but you can play with the values...

Answer 3

Change your css a bit
CSS:
#keyframes mymove {
0% {background-color:transparent; left:0px}
33% {background-color:yellow; left:250px}
66% {background-color:blue; left:0px; right:250px;}
100% {background-color:green; left:250px;}
}
Full working code:
#najava {
width: 197px;
height: 22px;
border-radius: 2px;
background-color: transparent;
opacity: 0.8;
font-weight: bold;
position: relative;
padding-left: 5px;
padding-right: 5px;
animation: mymove 5s linear 0s infinite alternate-reverse;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
#keyframes mymove {
0% {background-color:transparent; left:0px}
33% {background-color:yellow; left:250px}
66% {background-color:blue; left:0px; right:250px;}
100% {background-color:green; left:250px;}
}
<div id="najava">
<p>text text text text text</p>
</div>
Here is the working Demo