Question

I’m currently working on a HTML5 mobile platform and I have a landing page for my application which is tiled and is laid out as four equally sized tiles (divs) on the screen

I’ve been messing around with CSS3 animation all afternoon and I’ve found something which I think can be of use if I can figure out the logistics around using it (http://daneden.me/animate/).

What I’m trying to achieve is having the landing page tiles run the “bounce in” animation as the user logs in and is redirected to the landing page, to give the effect of the tiles loading in with the user.

Secondly, when a user clicks on a particular tile, I want that tile to run “bounce out” and then do a redirect to the page the user specified.

It’s worth mentioning I’m currently using JQuery mobile for some other functionality but I can’t quite get this to work and I’m not sure if there is a smoother, more lightweight method of achieving this as I’m currently experimenting with the CSS animation delay property to no aveil.

Any advice or suggestions are much appreciated.

Answer 1

Do you mean something like this?

demo

It’s not all CSS, it uses JavaScript to delay the default click action (update: uses JavaScript for redirect, as it now uses div elements, not links). However, the animations are handled by the CSS.

HTML should be something like:

<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>

Relevant CSS:

.tile {
    display: inline-block;
    opacity: 0;
    transform: scale(.3);
    background: lightblue;
    animation: bouncein 1s .5s cubic-bezier(0, 2.5, 1, -.25) forwards; 
}
@keyframes bouncein { 
    from { opacity: 0; transform: scale(.3); }
    to { opacity: 1; transform: scale(1); }
}
.bounceout {
    animation: bounceout 1s cubic-bezier(0, 2.5, 1, -.25) forwards;
}
@keyframes bounceout {
    from { opacity: 1; transform: scale(1); } 
    to { opacity: 0; transform: scale(.1); }
}

All the JavaScript I’ve used:

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

If you want to know more about CSS3 animations vs. jQuery animations then this article could help.