动画元素从左到右具有特定的过渡

Question

我有一个我希望有类似行为的元素：

也许它更容易使用这个gif，但我的目标是通过脚本（或css）来实现，所以我想为＆＃34; cube＆＃34;设置动画。与gif类似的行为。 到目前为止，我已经实现了移动＆＃34; cube＆＃34;从左到右，但我无法找到解决方案，我可以放慢＆＃34; cube＆＃34;什么时候靠近中心，当离开中心时加速。

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 1

这是具有正确缓动并仅使用css（更好的表现）的动画。

＆＃13;

＆＃13;

@-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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会使用CSS动画：http://www.w3schools.com/css/css3_animations.asp 示例：http://jsfiddle.net/98cnauuj/1/

.cube {
    -webkit-animation: cubeanim 1s infinite; /* Chrome, Safari, Opera */
    animation: cubeanim 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes cubeanim {
    0% {
     left: 0;   
    }

    20% {
     left: 40%;   
    }
    80% {
     left: 60%;   
    }
    100% {
     left: 100%;   
    }
}

/* Standard syntax */
@keyframes cubeanim {
    0% {
     left: 0;   
    }

    20% {
     left: 40%;   
    }
    80% {
     left: 60%;   
    }
    100% {
     left: 100%;   
    }
}

（当然你需要调整值以使它看起来很好，它只是为了向你展示一个基本的实现）

Answer 3

试试这个：

var width = $(".holder").width();
setInterval(function () {
    $(".cube").fadeIn("fast").css({
        left: "0%"
    }).animate({
        left: "+=50%"
    }).animate({
        left: "+=5%"
    }, width).animate({
        left: "+=45%"
    }).fadeOut("fast");
}, 2500);

FIDDLE.