Les Transitions
Voilà enfin ma partie.
Si j'ai des oublie, faites moi signe ^^
Les transitions ? Qu'est-ce que c'est ? Et particulièrement, quelle est son utilité ?
Les transitions sont les propriétés qui agissent directement ou indirectement sur vos images, vos blocs ou simplement vos écritures.
Il en existe plusieurs qui ont chacune leur fonctionnalité.
Les voicis :
- transition-property : elle agit directement sur les propriétés comme height, width et background
- transition-duration : celle-ci contrôle la durée de l'animation.
- transition-timing-function : ici, c'est la courbe de vitesse de la transition qui est concernée, accélération ou non.
- transition-delay : cette transition concerne le départ de l'effet.
Transition-Property
La transition-property influence directement les éléments d'un bloc que ce soit la largeur, la taille, le fond en lui-même lorsqu'on positionne directement sa souris dessus (hover).
Jusqu'ici, cela peut paraître nébuleux.
Imaginons, nous avons un rectangle des plus communs. Nous voudrions faire en sorte qu'il s'agrandisse en taille et en largeur lorsqu'on positionne la souris sur le bloc. . Nous créons donc notre CSS de base et le css d'effet de survol de la souris.
Nous avons donc.
- Code:
/* rectangle transition*/
.rectangle {width: 200px;
height: 100px;
background-color: #000000;}
/*Effet au survol de la souris*/
.rectangle:hover {transition-property : width, height, background-color;
width: 400px;
height: 200px;
background-color: #ffffff;}
- Code:
<div class="rectangle"></div>
Nous obtiendrons.
C'est plus parlant que des mots.
Cet effet ne s'arrête pas qu'à des carrés, des rectangles, des ronds. Il s'étend aussi aux chiffre, nombres, lettres.
Voici un exemple avec les mots : Never Utopia. Une class avec une largeur, un surlignement en pointillé. Au survol, un changement de couleur et de taille. Ce qui donne.
- Code:
/*titre transition*/
.titre_transition {font-size: 15px;
border-bottom: 2px #000000 dotted;
width: 200px;}
.titre_transition:hover {font-size: 18px;
transition-property : width, font-size, border;
border-bottom: 3px #ffffff dotted;
width: 300px;}
Html
- Code:
<div class="titre_transition">Never Utopia</div>
Never Utopia
Vous connaissez maintenant son effet.
Transition-duration
La transition-duration, comme son nom l'indique, est une propriété qui possède une certaine influence sur le temps. Elle agit sur la durée d'activation de l'effet au passage de la souris. Sans elle, la plupart des effets vous paraîtront invisible. Pour n'en citer qu'un, la propriété rotate à 360°.
Ce qui nous intéresse présentement, c'est qu'est ce qui se passerait si nous rajoutons cette propriété à nos cas suscités plus haut : le rectangle et le titre.
Nous rajoutons donc la propriété, en prenant attention au préalable, à tous les navigateurs existants. Et nous le nommons durée. Cela nous donne.
- Code:
/* rectangle transition*/
.durée {-o-transition-duration: 2s;
webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;}
Nous le rajoutons à notre html. Ce qui nous donne donc.
- Code:
<div class="durée rectangle"></div>
Nous obtiendrons l'effet suivant. Comme vous pouvez le constater, l'agrandissement du rectangle se réalise de manière plus légère.
Et pour le titre.
Never Utopia
- Code:
<div class="titre_transition">Never Utopia</div>
Ces effets ci-dessus peuvent être remplacés par d'autres. Tentez l'expérience de la durée en utilisant à la place du width, un transform: letter-spacing ou avec un margin. :)
Transition-timing-function
La transition-timing-function influence le bloc, mais d'une façon assez spéciale. Elle contrôle la courbe de vitesse : accélération, lenteur. Selon la propriété, l'effet change.
Cette transition comporte plusieurs propriétés. Les voici.
linear : La vitesse est constante sur toute la durée de l'animation.
ease : Rapide sur le début et ralenti sur la fin.
ease-in : Lent sur le début et accélère de plus en plus vers la fin.
ease-out : Rapide sur le début et décélère sur la fin.
ease-in-out : Le départ et la fin sont lents.
cubic-bezier(x,x,y,y) : Vous définissez vous même la courbe.
Afin de pouvoir mieux en cerner son effet, nous allons reprendre notre cas. Puis, nous lui rajoutons par exemple, la propriété cubic-bezier.
- Code:
/*transition timing function*/
.transition2 { -webkit-transition-timing-function: cubic-bezier(0,0,1,1);
-moz-transition-timing-function: cubic-bezier(0,0,1,1);
-ms-transition-timing-function: cubic-bezier(0,0,1,1);
-o-transition-timing-function: cubic-bezier(0,0,1,1);
transition-timing-function: cubic-bezier(0,0,1,1);}
- Code:
<div class="durée rectangle transition2"></div>
Ce qui nous donne.
Transition delay
La propriété transition-delay influence le départ, plus principalement quand l'effet débute au passage de la souris. Il peut être retardé ou au contraire avancé.
Pour mieux se donner une idée, nous reprendrons le cas du rectangle. Nous lui rajoutons la propriété transition-delay compatible avec tous les navigateurs. Ce qui nous donne.
- Code:
/*transition delay*/
.transition3 { -webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}
- Code:
<div class="durée rectangle transition2 transition3"></div>
Petits Conseils
Toute les étapes sur les transitions peuvent être regroupées en une et unique propriété que vous verrez ci-dessous.
- Code:
-moz-transition: property duration timing-function delay;
-o-transition: property duration timing-function delay;
_webkit-transition: property duration timing-function delay;
transition: property duration timing-function delay;
Mot de la fin
Voilà, vous connaissez le secret des transitions. Avec un peu de curiosité, vous pouvez même tester autre chose. ^^ Comme avec les padding, l'espacement de lettres, les margins. Vous verrez, ce n'est pas difficile.
Tutoriels utilisant des transitions
- Catégories aux descriptions cachées derrière l'illustration
- Défilement sur un titre
- Page d'accueil Mozaik
- Mise en forme complète du profil "upside down"
Sites parlant de transition
- http://creer-un-site.fr/propriete-transition-en-css3-270.php
- http://css.mammouthland.net/css3/animation-transition.php
- http://www.css3create.com/Les-Transitions
Dernière édition par Angelusia le Mer 3 Avr 2013 - 15:08, édité 17 fois
