动画

requestAnim.js

// Lastly, add in the `requestAnimationFrame` shim, if necessary. Does nothing 
// if `requestAnimationFrame` is already on the `window` object.
(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    var blacklisted  = /iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent);

    if (!window.requestAnimationFrame || blacklisted) {
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                    callback(currTime + timeToCall);
                },
                timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }


    if (!window.cancelAnimationFrame || blacklisted) {
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
    }

}());

smooth animation.js

http://jsfiddle.net/RCanine/LZnzf/

function remove(event) {
  var el = event.target;
  el.removeEventListener("webkitAnimationEnd", remove, false);
  el.removeEventListener("mozAnimationEnd", remove, false);
  el.className = null;
}

function showMessage (s) {
    var el = document.getElementById('message');
    el.innerHTML = s;

    /* set state */
    el.className = 's-visible'; 
    setTimeout(function(){
      /* set state back */
      el.addEventListener("webkitAnimationEnd", remove, false);
      el.addEventListener("mozAnimationEnd", remove, false);
      el.className = "s-hidden";
    }, 3000);
}

document.getElementById("link").onclick = function (event) {
  event.preventDefault();
  showMessage("Wow! How Awesome!");
};​