动画元素

Question

我有，我希望有类似这种行为的元素：

也许是更容易使用这个GIF，但我的目标是使它通过脚本（或CSS），所以我想动画像“gif”类似行为的“立方体”。 到目前为止，我实现了从左向右移动“立方体”，但是我无法找到解决方法，我可以在靠近中心时减慢“立方体”，并在离开中心时加速。

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（更好的表演）的动画。

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

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

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

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.