Parallèlement à l'introduction de CSS3, de nombreuses nouvelles fonctionnalités sont disponibles pour créer de superbes effets. l'un des plus utiles est la propriété de transition .
La propriété de transition est un nouveau développement important en CSS. Il peut être utilisé pour créer un effet de changement dynamique sur une div ou une classe en utilisant une structure simple:
transition: property duration timing-function delay;La transition de CSS3 est un excellent moyen d'ajouter un peu d'animation aux sites sans la surcharge importante d'une bibliothèque JavaScript telle que jQuery.
Avant de commencer, vous pouvez voir une démonstration ici de la propriété de transition en action .
Tout d'abord, pour que la propriété de transition fonctionne, la propriété standard à laquelle elle sera appliquée doit être définie. On peut soutenir que les deux propriétés les plus communes qui seront définies sont la largeur et la hauteur. Pour écrire la propriété autonome, utilisez simplement:
transition-property: define propertyEnsuite, une fois la propriété définie, les valeurs de début et de fin doivent être affectées. Dans le cas de valeurs telles que width ou height, la propriété doit être définie avec une valeur de départ, puis une valeur de fin avec une autre condition.
Par exemple, ici, nous définissons la propriété de transition sur width, puis sur la valeur de début de width, puis nous définissons la valeur de fin lorsque l'élément est survolé:
#mainheader {transition-property:width;width:50px;}#mainheader:hover {width:75px;}Maintenant que nous avons défini la propriété à transformer, les valeurs de début et de fin, nous devons définir la durée de la transition. Ceci est réalisé en définissant une longueur en secondes ou millisecondes comme ci-dessous:
transition-duration: duration;En construisant ceci dans l'exemple, le code suivant est créé:
#mainheader {transition-property:width;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}Cela signifie que le div principal sera étendu de 25px sur une durée de 5 secondes.
Le code est suffisant pour créer un bel effet, mais nous pouvons utiliser davantage la propriété de transition CSS3 en utilisant la fonction de synchronisation. En utilisant cette propriété, il est possible de modifier la courbe de vitesse de la durée de la transition. La propriété de transition est définie par défaut sur une courbe linéaire. Cependant, vous pouvez définir la facilité, la facilité d’insertion, la facilité d’insertion et même le cubic-bezier pour modifier la courbe de vitesse. Cubic-bezier vous permet de définir vos propres valeurs en utilisant (n, n, n, n) où n peut être compris entre 0 et 1 (par exemple linéaire serait (0,0,1,1)).
L'ajout de ce code à notre exemple entraîne:
#mainheader {transition-property:width;transition-timing-function:ease-in-out;transition-duration:0.5s;width:500px;}#mainheader:hover {width:750px;}De plus, tout comme la durée de transition, l'utilisation de la propriété transition-delay définit une pause avant que l'effet de transition ne commence:
transition-delay: time;Enfin, il est important de considérer deux choses lors de l’utilisation de la propriété de transition CSS3. Tout d'abord, la plupart des navigateurs en circulation nécessitent un préfixe de navigateur pour l'utiliser (les exceptions étant IE10, Opera et Firefox16 +):
-moz-transition: pour Firefox 15
-webkit-transition: pour Chrome et Safari
(Gardez à l'esprit que IE9 et versions ultérieures ne supportent pas du tout la propriété de transition.)
Deuxièmement, bien que j'aie utilisé les exemples ci-dessus pour plus de clarté, il est considéré comme pratique d'écrire sous une forme abrégée, comme suit:
#mainheader {-moz-transition: width ease-in-out 0.5s 0.1s; /* for Firefox 15 */-webkit-transition: width ease-in-out 0.5s 0.1s; /* for Chrome and Safari */transition: width ease-in-out 0.5s 0.1s;width:500px;}#mainheader:hover {width:750px;}Utilisez la propriété de transition de CSS3? Comment se compare-t-il aux tweens basés sur jQuery? Faites le nous savoir dans les commentaires.