Javascript css通过不同的动画旋转（循环？）

我在css中发现了一个很棒的代码笔，这些响应设备随屏幕大小而变化，对于我的班级，我正试图操纵它们，让它们在计时器上改变

这就是我说的-

我基本上是想让它在不同的设备动画中旋转，而不改变屏幕大小，我想知道我是否可以在纯css中做到这一点

我的第一个想法是用javascript交换类，用setTimeout控制交换。我想知道这样的事情是否可以用css来完成？也许是某种非常慢的关键帧，在它们之间循环

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

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

---

依此类推，然后不可避免地链接回第一台设备。我不认为这个方法是最好的方法，我认为如果我能完全用css来做的话，这将是最简单的。任何见解都会非常有用。谢谢你的阅读

如果有人感兴趣，根据@gion_13的回答，我提出了一个javascript解决方案-

如图所示：

将媒体查询样式交换到它们自己的类中，并添加循环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);
}

较短版本-

---

您只能通过使用动画在css中实现这一点，但是处理如此多的元素（6个元素）并尝试为每个设备状态（4个设备）同步6个动画是非常困难的，并且会导致代码混乱（6个动画，每个步骤6个）。我个人喜欢您最初的方法，并建议您使用css类定义每个设备（而不是媒体查询），然后使用计时器或通过用户交互（如按键）进行更改。太棒了，感谢您的回复@gion_13，我觉得javascript方法可能更容易。我想我只是好奇我是否可以在没有头痛的情况下在纯css中完成它。再次感谢！

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);
}