Transition css 2D
Nous voyons aujourd’hui les transition, en css.
Les transitions CSS vous permettent de modifier les valeurs de propriété en douceur (d’une valeur à une autre), sur une durée donnée.
Pour créer un effet de transition, vous devez spécifier deux choses:
- la propriété CSS à laquelle vous voulez ajouter un effet
- la durée de l’effet
Remarque: Si la partie de durée n’est pas spécifiée, la transition n’aura aucun effet car la valeur par défaut est 0.
L’exemple suivant montre un élément <div> rouge 100px * 100px red. L’élément <div> a également spécifié un effet de transition pour la propriété width, d’une durée de 2 secondes:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}L’effet de transition commencera lorsque la propriété CSS spécifiée (largeur) changera de valeur.
Maintenant, spécifions une nouvelle valeur pour la propriété width lorsqu’un utilisateur passe la souris sur l’élément <div>:
div:hover {
width: 300px;
}
Spécifier la courbe de vitesse de la transition
La transition-timing-function propriété spécifie la courbe de vitesse de l’effet de transition.
La propriété transition-timing-function peut avoir les valeurs suivantes:
ease– spécifie un effet de transition avec un début lent, puis rapide, puis une fin lente (valeur par défaut)linear– spécifie un effet de transition avec la même vitesse du début à la finease-in– spécifie un effet de transition avec un démarrage lentease-out– spécifie un effet de transition avec une fin lenteease-in-out– spécifie un effet de transition avec un début et une fin lentscubic-bezier(n,n,n,n)– vous permet de définir vos propres valeurs dans une fonction cubic-bezier
un exemple illustre les possibilités: Ici
La transition-delay propriété spécifie un délai (en secondes) pour l’effet de transition.
Transformations 2D
translate()rotate()scale()skewX()skewY()matrix()
L’exemple suivant déplace l’élément de 50 pixels vers la droite et de 100 pixels vers le bas par rapport à sa position actuelle
transform: translate(50px, 100px);
L’exemple suivant fait pivoter l’élément dans le sens des aiguilles d’une montre de 20 degrés:
transform: rotate(20deg);
L’exemple suivant fait pivoter l’élément dans le sens des aiguilles d’une montre de -20 degrés:
transform: rotate(-20deg);
La scale()méthode augmente ou diminue la taille d’un élément
L’exemple suivant augmente l’élément pour qu’il corresponde à deux fois sa largeur d’origine et à trois fois sa hauteur d’origine:
transform: scale(2, 3);
L’exemple suivant réduit l’élément à la moitié de sa largeur et de sa hauteur d’origine:
transform: scale(0.5, 0.5);
La skewX()méthode incline un élément le long de l’axe des X .
L’exemple suivant incline l’élément de 20 degrés le long de l’axe des abscisses:
transform: skewX(20deg);
La skewY()méthode incline un élément le long de l’axe des Y .
L’exemple suivant incline l’élément de 20 degrés le long de l’axe des ordonnées:
transform: skewY(20deg);
Nous pouvons cumuler les deux:
L’exemple suivant incline l’élément de 20 degrés le long de l’axe des abscisses et de 10 degrés :
transform: skew(20deg, 10deg);
La matrix()méthode combine toutes les méthodes de transformation 2D en une seule.
La méthode matrix () prend six paramètres contenant des fonctions mathématiques, ce qui vous permet de faire pivoter, de redimensionner, de déplacer et d’incliner des éléments.
Les paramètres sont les suivants: matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())
Exemple
div {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}Par la suite nous voyons d’autres propriétés.
Le code:
Nous faisons une animation en transition:
Le code:
