javascript - Animate element from left to right with specific transition -

I have an element that I want to behave like this:

Perhaps it's easy to use GIF, but my goal is to scripts (Or CSS), so I want to animate the "cube" like a gif with the same behavior. So far, I get the "cube" from left to right, but I am Can not find where I slow "Cube to be close to the center"; and speed when it gets away from the center.

HTML:

  & lt; Div class = "holder" & gt; & Lt; Div class = "cube" & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

CSS:

  .holder {status: relative; Width: 400px; }. SEB {status: absolute; Exhibit: None; Background: # 48a548; Width: 10px; Height: 10px; }  

Jquery:

var width = $ (".holder"). Width (); ({Left: "100%"}, width). Fade ("slow");}, 2500);

---

Here's the animation using the right alignment and CSS (better performance).

  @ -webkit-keyframe loader {0% {left: 0%; } 100% {LEFT: 100%; }} @ Keyframe loader {0% {left: 0%; } 100% {LEFT: 100%; }} .holder {status: relative; Width: 400px; Height: 10px; }. SEB {status: absolute; Width: 10px; Height: 10px; Left: 0; Background color: # 48a548; -WebKit-Animation: Loader 3S cubic bezier (0.030, 0.615, 0.99, 5, 5, 155) infinite; Animation: Loader 3s cubic bezier (0.030, 0.615, 0.9 9, 5, 5, 155) 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.6 S; }. Cube: nth-of-type (4) {-webkit-animation-delay: 0.8s; Animation-Delay: 0.8 s; }. Cube: nth-of-type (5) {-webkit-animation-delay: 1.0s; Animation-Delay: 1.0s; }  

  & lt; Div class = "holder" & gt; & Lt; Div class = "cube" & gt; & Lt; / Div & gt; & Lt; Div class = "cube" & gt; & Lt; / Div & gt; & Lt; Div class = "cube" & gt; & Lt; / Div & gt; & Lt; Div class = "cube" & gt; & Lt; / Div & gt; & Lt; Div class = "cube" & gt; & Lt; / Div & gt; & Lt; / Div & gt;