動畫元素

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.