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旋转通过不同的动画

回答

相关问题