Menu

Technocité
Nos formations
Nos services entreprise
Infos pratiques
Validation des Compétences
 
 

Nos projets

COFFEE
DigiBIRD
DIGISTORM
Stages d'été
 
 

Avec le soutien de

 

CSS3, la nouvelle mouture du célèbre langage de feuilles de style pour pages web, apporte son lot de nouveautés. Encore parfois méconnues, ces nouvelles fonctionnalités ouvrent des horizons graphiques intéressants et permettent des effets de style capables à présent de rivaliser avec JavaScript. Intéressons-nous de plus près au mécanisme des transitions avec CSS3.

De quoi s’agit-il ? Les transitions permettent de créer du liant et le passage d’un état à un autre lors d’interactions générées par l’utilisateur, comme un clic, le survol d’un lien ou un focus sur un élément.

La définition du W3C est on ne peut plus claire à ce sujet : « Les transitions CSS permettent au changement de la valeur d’une propriété CSS de se produire progressivement sur une durée spécifiée. ».

Pour ajouter une transition au changement de la couleur d’un lien lors d’un survol par exemple, on écrira en html :

a href="#" class="foo"

Et dans la feuille de style :

a.foo {

        color: #009;  

        transition-property: color;

        transition-duration: 2s;

        transition-timing-function: ease;    

}

 

a.foo:hover {

        color: #6FC;

}

 

Les trois parties du mécanisme de transition sont : transition-property qui détermine la propriété à laquelle la transition s’applique, transition-duration pour la durée en secondes et transition-timing-function pour déterminer la courbe de vitesse d’une transition (il en existe de six types différents).

Comme toujours pour les propriétés CSS, on peut utiliser la forme abrégée :

transition : color 2s ease ;

L’exemple ci-dessus vise à un fonctionnement universel. Toutefois, la spécification CSS3 repose sur une série de modules implémentés au fur et à mesure par les navigateurs, parfois avec un support expérimental afin de permettre de tester de nouvelles propriétés en conditions réelles. Les préfixes de navigateur permettent de gérer ces propriétés expérimentales. Lorsque celles-ci sont intégrées à la norme aboutie, le navigateur peut se passer du préfixe pour interpréter la propriété.

On écrira donc :

-webkit-transition: color 2s ease ;          // Webkit (safari)

-moz-transition: color 2s ease ;             //Mozilla

-o-moz-transition: color 2s ease ;         //Opera

transition: color 2s ease ;                     // intégration à la norme (les autres prefixes étant –ms- pour IE, -khtml- pour Konqueror et –chrome- pour Chrome)

Pour appliquer cette transition à une autre pseudo-classe (un focus clavier par exemple), il suffira de l’ajouter ainsi :

a.foo {

        color: #009;  

        -webkit-transition: color 2s ease ;

        -moz-transition: color 2s ease ;

        -o-moz-transition: color 2s ease ;

        transition: color 2s ease ;

}

 

a.foo:hover, a.foo:focus {

        color: #6FC;

}

 

On pourra également appliquer la transition à plusieurs propriété css, voire à toutes en utilisant la valeur all.

Transition : all 2s ease ;

Toutes les propriétés compatibles avec les transitions sont visibles sur le site : http://www.w3.org/TR/css3-transitions/#properties-form-css

En conclusion, les transitions sont un moyen très simple et efficace d’ajouter un effet d’animation à vos pages, en utilisant une solution native aux navigateurs (tout au moins à ceux qui supportent ces fonctionnalités). Elle peut avantageusement se substituer à des solutions basées sur des librairies JavaScript comme JQuery ou Prototype, qui elles ne sont pas natives. Les choses allant bon train, une plus grande compatibilité et un support de ces fonctions dans la plupart des navigateurs devrait se concrétiser dans un avenir proche.