var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
"http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
"http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
"http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
"http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
"http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
"http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
"http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
"http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
"http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png"
];
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
shuffle(av_icons);
$.each(av_icons, function(index, value) {
$(".icon-slider").append("<img src='" + value + "' />");
});
.icon-slider img {
position: relative;
animation: load 1s normal forwards ease-in-out;
top: -1000px;
left: -500px;
width: 90px;
height: 90px;
}
.icon-slider img:nth-child(1) {
animation-delay: 0s;
}
.icon-slider img:nth-child(2) {
animation-delay: 0.5s;
}
.icon-slider img:nth-child(3) {
animation-delay: 1s;
}
.icon-slider img:nth-child(4) {
animation-delay: 1.5s;
}
.icon-slider img:nth-child(5) {
animation-delay: 2s;
}
.icon-slider img:nth-child(6) {
animation-delay: 2.5s;
}
.icon-slider img:nth-child(7) {
animation-delay: 3s;
}
.icon-slider img:nth-child(8) {
animation-delay: 3.5s;
}
.icon-slider img:nth-child(9) {
animation-delay: 4s;
}
.icon-slider img:nth-child(10) {
animation-delay: 4.5s;
}
@keyframes load {
80% {
opacity:0.5;
transform: scale(0.5);
}
90% {
top: 0;
left:0;
transform: rotate(0deg) scale(.8);
opacity:1;
}
100% {
top: 0;
left: 0;
transform: rotate(360deg) scale(1);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content icon-slider"></div>
$(".av_icon_"+index).css("opacity", "0.5");
将透明度设置为一半,这不是动画。 这就是为什么您看到它们是透明的原因。 - pablito.aven