將CSS3轉換添加到jQuery Animate腳本

Question

下面我有一個腳本，它以隨機順序加載圖像並將它們飛到屏幕上。你可以在這裏找到腳本：

https://jsfiddle.net/38e126f4/

我現在想能不同的隨機CSS3過渡效果，因爲他們飛搬上銀幕添加到每個圖像。我嘗試使用步驟功能無濟於事。

step: function(now, fx) { 
    var num = Math.floor((Math.random() * 2) + 1); 
    switch(num) { 
     case(1): 
      $(".av_icon_"+index).css("opacity", "0.5"); 
      break; 
     case(2): 
      $(".av_icon_"+index).css('-webkit-transform','rotate(0deg) scale(1) skew('+now+'deg) translate(0px)'); 
      break; 
     } 
}, 

當我添加此函數時，它將所有動畫設爲空值，並使所有圖像透明，並具有瘋狂的css轉換效果。

什麼是最好的方式添加整齊的過渡到這些圖像？

Answer 1

你的意思是在css3中做整個動畫？

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>