Les transitions CSS3, la fin d’animate() ?

Depuis CSS3, on peut faire ce qu’on appelle des transitions, tout comme avec jQuery d’ailleurs.

Pour une même propriété CSS, une transition est le passage d’une valeur X à une valeur Y.

Exemple

On prend une boîte HTML simple :

<div id="demo"></div>​​​​​​​
#demo {
    width: 100px;
    height: 100px;
    background: red;
}

On souhaite animer cette boîte en augmentant sa taille (width) jusqu’à 300px sur une durée d’une seconde. Cette animation doit être faite sur le hover.

En jQuery nous pourrions faire :

$('#demo').on({
    mouseenter: function() {
        $(this).animate({
            width: '300px'
        }, 1000);
    },
    mouseleave: function() {
        $(this).animate({
            width: '100px'
        }, 1000);
    }
});​

Et voici en CSS3, à partir du même code HTML et de la même base CSS :

#demo {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 1s;
    -moz-transition: width 1s; /* Firefox 4 */
    -webkit-transition: width 1s; /* Safari and Chrome */
    -o-transition: width 1s; /* Opera */
}

#demo:hover {
    width: 300px;
}​

On spécifie dans transition la durée de l’animation, 1s et sur quelle propriété CSS doit être appliquée l’animation, width.

On peut aussi faire une animation sur plusieurs propriétés à la fois en séparant les couples « propriété seconde » par des virgules.

Attention, les transitions CSS3 ne sont pas supportées par Internet Explorer, ce qui laisse encore .animate() de beaux jours devant elle…

Vous aimerez peut être aussi...

1 Réponse

  1. 27 février, 2012

    […] } #themeHeader #titleAndDescription * { color: black; } chez-syl.fr – Today, 1:36 […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Image CAPTCHA

*