Posts tagged "css3"

setTimeout fix for -webkit-transition

Here's a simple animation which utilizes webkitTransition:

Click to animate

The code behind this example is not complicated:

element.style.webkitTransitionProperty = 'left';
element.style.webkitTransitionDuration = '2s';
element.addEventListener('click', function () {
    this.style.left = '100px';
    this.addEventListener('webkitTransitionEnd', function () {
        this.style.left = 0;
    });
});

Gorgeous CSS3 buttons inspired by Aqua

Modern browsers can display exciting visual effects such as drop shadows (without the use of background images). CSS3 makes it possible to turn submit inputs and even links into rich, Aqua-like buttons in these browsers (alternative style rules can be provided for older browsers).