將CSS3過渡添加到jQuery Animate腳本

Question

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

https://jsfiddle.net/38e126f4/

我現在希望能夠在每個圖像飛到屏幕上時為每個圖像添加不同的隨機CSS3過渡效果。 我嘗試使用step功能無濟於事。

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>