CSS动画加载和重定向之前

我目前正在一个HTML5移动平台上工作，我的应用程序有一个登录页，它是平铺的，在屏幕上以四个大小相等的平铺（div）排列

整个下午我都在摆弄CSS3动画，我发现了一些我认为有用的东西，如果我能弄清楚使用它的逻辑(http://daneden.me/animate/)

我试图实现的是，当用户登录并重定向到登录页时，让登录页磁贴运行“bounce-in”动画，以提供与用户一起加载磁贴的效果

其次，当用户单击特定的互动程序时，我希望该互动程序运行“跳出”，然后重定向到用户指定的页面

值得一提的是，我目前正在使用JQuery mobile实现一些其他功能，但我不能完全实现这一点，我不确定是否有一种更平滑、更轻量级的方法来实现这一点，因为我目前正在尝试将CSS动画延迟属性设置为no aveil

---

非常感谢您的任何建议。

您的意思是这样的吗

它不是所有的CSS，它使用JavaScript延迟默认的点击操作（update：使用JavaScript重定向，因为它现在使用

div

元素，而不是链接）。但是，动画由CSS处理

HTML应该类似于：

<div data-redirect='page1.html' class='tile'></div>
<div data-redirect='page2.html' class='tile'></div>
<div data-redirect='page3.html' class='tile'></div>
<div data-redirect='page4.html' class='tile'></div>

我使用过的所有JavaScript：

document.body.addEventListener('click', function(e){
    var target = e.target;
    if(target.classList.contains('tile')) {
        target.classList.add('bounceout');
        setTimeout(function() {
            if(target.dataset) window.location = target.dataset.redirect;
            else window.location = target.getAttribute('data-redirect');
            }, 1000);
    }
}, false);

---

如果您想了解更多有关CSS3动画与jQuery动画的信息，那么可以提供帮助。

Mootools非常适合html DOM动画，我还没有尝试过使用CSS3，所以我不知道它是否更好，但我知道它可以做到这一点，但很难与Divs一起使用，这正是我想要的。我已经更新了演示，使用div元素而不是链接，并且在上面的答案中加入了所有JavaScript。

document.body.addEventListener('click', function(e){
    var target = e.target;
    if(target.classList.contains('tile')) {
        target.classList.add('bounceout');
        setTimeout(function() {
            if(target.dataset) window.location = target.dataset.redirect;
            else window.location = target.getAttribute('data-redirect');
            }, 1000);
    }
}, false);