Animate element from left to right with specific transition

I have an element that I want to have behavior similar to this:

enter image description here

Maybe it’s easier to use this gif, but my goal is to make it through script (or css), so I want to animate the “cube” with similar behavior like the gif. So far I achieve moving the “cube” from left to right, but I can’t find solution where I can slow the “cube” when is near the center, and speed up when is moving away from the center.

HTML:

 <div class="holder">
   <div class="cube">
   </div>
 </div>

CSS:

.holder{
    position:relative;
    width:400px;
}
.cube{
   position:absolute; display:none;background: #48a548; 
   width: 10px; height: 10px; 
}

Jquery:

var width = $(".holder").width(); 

setInterval(function () {
 $(".cube").fadeIn("fast").css({ left: "0%" }).animate(
  { 
    left: "100%" 
  }, 
  width).fadeOut("slow");
}, 2500);

JSFIDLE

Answer

Here is the animation with the correct easing and using only css (better performances).

@-webkit-keyframes loader {
	0% { left: 0%; }
	100% { left: 100%; }
}
@keyframes loader {
	0% { left: 0%; }
	100% { left: 100%; }
}

.holder {
	position:relative;
	width:400px;
	height: 10px;
}
.cube {
	position: absolute;
	width: 10px;
	height: 10px;
	left: 0;
	background-color: #48a548;
	-webkit-animation: loader 3s cubic-bezier(0.030, 0.615, 0.995, 0.415) infinite;
	animation: loader 3s cubic-bezier(0.030, 0.615, 0.995, 0.415) infinite;
}
.cube:nth-of-type(1) {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.cube:nth-of-type(2) {
	-webkit-animation-delay: 0.40s;
	animation-delay: 0.40s;
}
.cube:nth-of-type(3) {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.cube:nth-of-type(4) {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
.cube:nth-of-type(5) {
	-webkit-animation-delay: 1.0s;
	animation-delay: 1.0s;
}
<div class="holder">
	<div class="cube"></div>
	<div class="cube"></div>
	<div class="cube"></div>
	<div class="cube"></div>
	<div class="cube"></div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *