javascript - css 旋转(循环？)通过不同的动画

Question

我在 css 中找到了这些响应式设备的很棒的代码笔，它会随着屏幕尺寸而变化，对于我的类(class)，我正试图操纵它们根据计时器进行更改。

这就是我所说的 - http://codepen.io/hariawan/pen/mjbwy .

我基本上是在尝试让它在不改变屏幕尺寸的情况下通过不同的设备动画旋转，我想知道我是否可以在纯 css 中做到这一点。

我的第一个想法是用 javascript 交换类，用 setTimeout 控制交换。我想知道这样的事情是否可以纯粹用 css 来完成？也许是某种非常慢的关键帧循环遍历所有这些？

我的第一个想法是这样的:

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

依此类推，然后不可避免地链接回第一个设备。我不认为这种方法是最好的方法，而且我认为如果我能完全用 css 来完成它会是最简单的。任何见解都会非常有帮助。感谢阅读!

Answer 1

较短的版本 - 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);
}