Les Transitions en CSS3

Une évolution avec CSS3 était la capacité d'écrire des comportements pour des transitions et des animations. Les développeurs de front-end ont demandé la possibilité de concevoir ces interactions au sein de HTML et CSS, sans utiliser JavaScript ou Flash, depuis des années. Maintenant, leur souhait est devenu réalité.

Avec les transitions CSS3, vous avez le potentiel de modifier l'apparence et le comportement d'un élément chaque fois qu'un changement d'état se produit, par exemple lorsqu'il survient, concentré, actif ou ciblé.

Les animations dans CSS3 permettent l'apparition et le comportement d'un élément à modifier dans plusieurs images clés. Les transitions apportent un changement d'un état à l'autre, tandis que les animations peuvent définir plusieurs points de transition sur différentes images clés.

Transitions :

Comme mentionné, pour qu'une transition se produise, un élément doit avoir un changement d'état et différents styles doivent être identifiés pour chaque état. La façon la plus simple pour déterminer les styles pour différents états est d'utiliser les pseudo-classes cible: flottant,: focus,: active et: target.

Il existe quatre propriétés liées à la transition au total, y compris la transition-propriété, la durée de transition, la fonction de transition-temporisation et la temporisation de transition. Tous ces éléments ne sont pas nécessaires pour créer une transition, les trois premiers étant les plus populaires.

Dans l'exemple ci-dessous, la boîte changera sa couleur d'arrière-plan au cours d'une seconde de manière linéaire

Dans HTml <div class="box">Box</div>

.box {

  background: #2db34a;

  transition-property: background;

  transition-duration: 1s;

  transition-timing-function: linear;

}

.box:hover {

  background: #ff7b29;

}

Propriété transitoire

La transition-property propriété détermine exactement quelles propriétés seront modifiées en conjonction avec les autres propriétés de transition. Par défaut, toutes les propriétés dans les différents états d'un élément seront modifiées lors de la modification. Cependant, seules les valeurs des propriétés identifiées dans la transition-property qui  seront affectées par les transitions.

Dans l'exemple ci-dessus, la propriété  background est identifiée dans la valeur transition-property. Ici, la  propriété background est la seule propriété qui changera sur la durée d’une seconde d'une manière linear. Toute autre propriété incluse lors de la modification de l'état d'un élément, mais non incluse dans la  valeur transition-property, ne recevra pas les comportements de transition définis par les propriétés transition-duration ou transition-timing-function.

Si plusieurs propriétés doivent être transférées, elles peuvent être séparées par des virgules dans la valeur transition-property.  En outre, la valeur du mot-clé all peut être utilisée pour transmettre toutes les propriétés d'un élément.

<div class="box">Box</div>

body {

  color: #fff;

  font: 600 14px/24px "Open Sans", "HelveticaNeue-Light",

 "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, 

"Lucida Grande", Sans-Serif;

}

.box {

  background: #2db34a;

  border-radius: 6px;

  cursor: pointer;

  height: 95px;

  line-height: 95px;

  text-align: center;

  transition-property: background, border-radius;

  transition-duration: 1s;

  transition-timing-function: linear;

  width: 95px;

}

.box:hover {

  background: #ff7b29;

  border-radius: 50%;

}

Exemple de transition des valeurs de plusieurs propriétés

Propriétés de transition

Il est important de noter que toutes les propriétés ne peuvent être transférées , seules les propriétés disposant d'un point de repère identifiable. Les couleurs, les tailles de police et les mêmes peuvent être transférés d'une valeur à l'autre car ils ont des valeurs reconnaissables entre elles. La propriété display, par exemple, peut ne pas être modifiée car elle n'a aucun point médian. 

Durée de transition

La durée pendant laquelle une transition a lieu est définie à l'aide de la propriété transition-duration. La valeur de cette propriété peut être définie en utilisant des valeurs de synchronisation générales, y compris secondes ( s) et millisecondes ( ms).Ces valeurs de synchronisation peuvent également se produire dans des mesures fractionnaires, par exemple. .2s

Lors de la transition de plusieurs propriétés, vous pouvez définir plusieurs durées, une pour chaque propriété. Comme pour la valeur transition-property de la propriété, plusieurs durées peuvent être déclarées à l'aide de valeurs séparées par des virgules. L'ordre de ces valeurs lors de l'identification des propriétés et des durées individuelles est important. Par exemple, la première propriété identifiée dans la propriété transition-property  correspond à la première identifiée dans la propriété transition-duration, et ainsi de suite.

Si plusieurs propriétés sont en transition avec une seule valeur de durée déclarée, cette valeur sera la durée de toutes les propriétés de transition.

<div class="box">Box</div>

body {

  color: #fff;

  font: 600 14px/24px "Open Sans", 

"HelveticaNeue-Light", "Helvetica Neue Light", 

"Helvetica Neue", Helvetica, Arial, "Lucida Grande", 

Sans-Serif;

}

.box {

  background: #2db34a;

  border-radius: 6px;

  cursor: pointer;

  height: 95px;

  line-height: 95px;

  text-align: center;

  transition-property: background, border-radius;

  transition-duration: .2s, 1s;

  transition-timing-function: linear;

  width: 95px;

}

.box:hover {

  background: #ff7b29;

  border-radius: 50%;

}

Calendrier de transition

La propriété transition-timing-function sert à définir la vitesse dans laquelle une transition se déplacera. En  connaissant la durée de la propriété transition-duration, une transition peut avoir plusieurs vitesses dans une seule durée. Quelques - unes des valeurs de mots - clés les plus populaires pour la propriété transition-timing-function comprennent linear, ease-in, ease-out et ease-in-out.

La valeur linear du mot-clé identifie une transition qui se déplace à une vitesse constante d'un état à l'autre. La valeur ease-in  identifie une transition qui commence lentement et accélère tout au long de la transition, tandis que la valeur  ease-out identifie une transition qui démarre rapidement et ralentie tout au long de la transition. La valeur ease-in-out  identifie une transition qui commence lentement, accélère au milieu, puis ralentit avant de finir.

Chaque fonction de synchronisation a une courbe cubique-bezier derrière elle, qui peut être spécifiquement définie en utilisant la valeur cubic-bezier(x1, y1, x2, y2).Des valeurs supplémentaires incluent step-start, step-stop et une valeur steps(number_of_steps, direction) identifiée de manière unique .

Lors de la transition de plusieurs propriétés, vous pouvez identifier plusieurs fonctions de synchronisation. Ces valeurs de fonction de synchronisation, comme pour d'autres valeurs de propriété de transition, peuvent être déclarées comme des valeurs séparées par des virgules.

<div class="box">Box</div>

body {

  color: #fff;

  font: 600 14px/24px "Open Sans", 

"HelveticaNeue-Light", "Helvetica Neue Light",

 "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

 Sans-Serif;

}

.box {

  background: #2db34a;

  border-radius: 6px;

  cursor: pointer;

  height: 95px;

  line-height: 95px;

  text-align: center;

  transition-property: background, border-radius;

  transition-duration: .2s, 1s;

  transition-timing-function: linear, ease-in;

  width: 95px;

}

.box:hover {

  background: #ff7b29;

  border-radius: 50%;

}

Retard de transition

En plus la déclaration de la propriété de transition, la durée et la fonction de temporisation, vous pouvez également définir un délai avec la propriété transition-delay. Le délai définit une valeur de temps, des secondes ou des millisecondes, ce qui détermine combien de temps une transition doit être bloquée avant l'exécution. Comme pour toutes les autres propriétés de transition, pour retarder de nombreuses transitions, chaque délai peut être déclaré comme une valeur séparée par des virgules.

body {

  color: #fff;

  font: 600 14px/24px "Open Sans", 

"HelveticaNeue-Light", "Helvetica Neue Light",

 "Helvetica Neue", Helvetica, Arial, "Lucida Grande",

 Sans-Serif;

}

.box {

  background: #2db34a;

  border-radius: 6px;

  cursor: pointer;

  height: 95px;

  line-height: 95px;

  text-align: center;

  transition-property: background, border-radius;

  transition-duration: .2s, 1s;

  transition-timing-function: linear, ease-in;

  transition-delay: 0s, 1s;

  width: 95px;

}

.box:hover {

  background: #ff7b29;

  border-radius: 50%;

}

    .box:hover {

     background: #ff7b29;

  border-radius: 50%;
} 

Transitions sténographiques

Déclarer chaque propriété de transition individuellement peut devenir assez intensive, en particulier avec les préfixes de fournisseur. Heureusement, il existe une propriété abrégée transition, capable de supporter toutes ces propriétés et valeurs différentes .En utilisant la  seule valeur transition, vous pouvez définir chaque valeur de transition dans l'ordre transition-property, transition-duration, transition-timing-function et enfin transition-delay. N'utilisez pas de virgules avec ces valeurs, sauf si vous identifiez de nombreuses transitions.

Pour définir de nombreuses transitions à la fois, définissez chaque groupe individuel de valeurs de transition, puis utilisez une virgule pour séparer chaque groupe supplémentaire de valeurs de transition.

body {

  color: #fff;

  font: 600 14px/24px "Open Sans", 

"HelveticaNeue-Light", "Helvetica Neue Light",

 "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 

 Sans-Serif;

}

.box {

  background: #2db34a;

  border-radius: 6px;

  cursor: pointer;

  height: 95px;

  line-height: 95px;

  text-align: center;

  transition: background .2s linear, 

   border-radius 1s ease-in 1s;

  width: 95px;

}

.box:hover {

  background: #ff7b29;

  border-radius: 50%;

}