CSS旋轉通過不同的動畫

（循環？）我發現在CSS與屏幕尺寸變形響應這些設備的真棒代碼筆，和我的課，我想他們操縱成一個定時變更。CSS旋轉通過不同的動畫

這就是我所說的 - http://codepen.io/hariawan/pen/mjbwy。

我基本上是想獲得它通過不同的設備沒有的動畫在屏幕尺寸改變旋轉，我想知道如果我能在純粹的CSS做到這一點。

我的第一個想法是隻是交換類使用JavaScript，用setTimeout的控制交換。我想知道這樣的事情是否可以純粹用CSS來完成？也許某種非常慢的關鍵幀遍歷所有這些關鍵幀？

我的第一個想法是這樣的：

setTimeout(function() { 
    // change 1 
    setTimeout(function() { 
     // change 2 
    }, 5000); 
    }, 5000);

等等，那麼不可避免的鏈接回第一設備。我不認爲這種方法是最好的方法，我認爲這將是最簡單的，如果我可以完全在CSS中完成。任何見解都會非常有幫助。謝謝閱讀！

來源

2014-10-20 ajmajmajma

您可以通過使用動畫，但處理如此多的元素（6元），並嘗試同步6個動畫爲每個設備狀態（4個設備）做到這一點只在CSS是很辛苦，導致亂碼（6個動畫與6步驟）。我個人很喜歡你的初步做法和建議您使用CSS類來定義每個設備（而不是媒體查詢），然後要麼定時器或通過用戶交互改變（如按鍵） – 2014-10-20 17:30:53

真棒，你的迴應@ gion_13感謝，我覺得像JavaScript方法可能更容易。我想我只是好奇如果我可以在沒有頭痛的情況下用純CSS來做。再次感謝！ – ajmajmajma 2014-10-20 17:34:27

較短的版本 - http://jsfiddle.net/n0L3eouq/

timeout(0); 
function timeout(ind) { 
    var classes = ['desk', 'laptop', 'tablet', 'phone']; 
    $('#device').removeClass(classes.join(' ')) 
       .addClass(classes[ind % classes.length]); 
    setTimeout(function() { timeout(ind + 1); }, 4000); 
}

來源

2014-10-20 19:26:35 Cheery

如果有人有興趣，基於關閉@ gion_13的答案，我做了一個JavaScript的解決方案 -

在這裏看到：http://codepen.io/ajmajma/pen/JBrtw

交換媒體查詢樣式自己的班級，加入一個循環的JavaScript超時像這樣

timeout(); 
function timeout() { 

setTimeout(function() { 

    if($("#device").hasClass("desk")){ 
     $("#device").removeClass("desk"); 
     $("#device").addClass("laptop"); 
    }else if($("#device").hasClass("laptop")){ 
     $("#device").removeClass("laptop"); 
     $("#device").addClass("tablet"); 
    }else if($("#device").hasClass("tablet")){ 
     $("#device").removeClass("tablet"); 
     $("#device").addClass("phone"); 
    }else if($("#device").hasClass("phone")){ 
     $("#device").removeClass("phone"); 
     $("#device").addClass("desk"); 
    } 

    timeout(); 
}, 4000); 
}

來源

2014-10-20 18:28:57 ajmajmajma

CSS旋轉通過不同的動畫

回答

相關問題