Comment utiliser les transitions CSS3

Tout le monde aime le mouvement. L'ajout de la quatrième dimension (temps) à la conception d'un site est la principale manière dont la conception basée sur un écran se démarque du design d'impression. Les transitions CSS sont une méthode simple pour animer les propriétés d'un élément, vous permettant d'enrichir certains événements de votre conception Web sans avoir recours à Flash ou à JavaScript.

Le W3C décrit avec justesse les transitions sur leur site Web, car "CSS Transitions permet aux modifications de propriété des valeurs CSS de se produire en douceur sur une durée spécifiée". En d'autres termes, les transitions CSS nous permettent de modifier une propriété de manière incrémentielle, créant une sensation de mouvement et imprégnant les conceptions de subtilité et d'émotion impossible avec un changement rapide.

Support du navigateur

Tous les navigateurs modernes (oui même IE!) Prennent désormais en charge les transitions CSS. Cependant, surtout, si les transitions ne sont pas prises en charge dans le navigateur utilisé, la transition est ignorée et les modifications apportées à la propriété seront appliquées instantanément. Cette dégradation gracieuse est la pierre angulaire des meilleures pratiques.

Afin d'étendre la portée de la prise en charge des navigateurs, nous pouvons utiliser des préfixes de fournisseurs, ce qui étend la fonctionnalité à Firefox 4-15, Opera 10.5-12 et la plupart des versions de Chrome et Safari. Le code, y compris les alternatives au préfixe du fournisseur, ressemble à ceci:

div {-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;transition: all 1s ease;}

La propriété non préfixée est ajoutée au bas de la pile pour garantir que l'implémentation finale l'emportera sur tous les autres, à mesure que la propriété se déplace du statut brouillon au statut final.

Paramètres de transition

Il existe quatre paramètres pour les transitions CSS:

• propriété de transition: la propriété à interpoler ou le mot clé "tous" à appliquer à toutes les propriétés;
• durée de transition: durée de la transition;
• transition-timing-function: l'assouplissement à appliquer, cela crée un mouvement d'apparence plus naturelle
• transtion-delay: spécifie un délai au début de la transition.

De plus, vous pouvez également utiliser la propriété abrégée (comme dans l'exemple ci-dessus) où les paramètres sont spécifiés comme propriété, durée, fonction de temporisation, délai.

Propriétés pouvant être transposées

Vous ne pouvez que des propriétés de transition pouvant être converties en une valeur mathématique. Ainsi, par exemple, vous pouvez effectuer une transition de taille de police; vous ne pouvez pas faire la transition font-face.

La liste complète des propriétés pouvant actuellement être transférées est la suivante:

background-position, border-bottom-colour, border-bottom-width, border-left-color, border-left-width, border-right-color, border-right-width, espacement des bordures, border-top-color, border-top-width, bottom, clip, couleur, taille de la police, poids de la police, hauteur, gauche, espacement des lettres, marge inférieure, marge gauche, marge droite, marge supérieure, hauteur max, width, min-height, min-width, opacité, contour-couleur, largeur du contour, padding-bottom, padding-left, padding-right, padding-top, à droite, text-indent, text-shadow, top, vertical- align, width, word-spacing, z-index.

Utiliser des transitions

Les déclarations de transition sont attachées à l'état normal de l'élément. Par conséquent, déclarée une seule fois pour plusieurs états tels que: focus,: active et pseudo-classes.

En utilisant le code suivant, nous pouvons configurer un menu de base et un paragraphe de texte. Il est stylé de sorte que les éléments de menu changent de couleur et de couleur d'arrière-plan lorsqu'ils sont survolés, et que le lien en ligne change de couleur de soulignement du blanc au vert lorsqu'il survole:

Business
  Code 
  Conception 
  Inspiration 
  Divers 
  Mobile 
  Nouvelles 
  Ressources 
  Facilité d'utilisation 
  Entier posuere erat un lien in ante   aliquet de venenatis dapibus posuere velit.  Nullam id dolor id nibh ultricies vehicula ut id elit.  Entier posuere erat aliquet ante venenatis dapibus posuere velit.  Nullam quis risus eget urna mollis ornare vel eu leo. 

Voici à quoi ça ressemble:

Utilisez-vous des transitions CSS3? Quels effets avez-vous pu créer? Faites le nous savoir dans les commentaires.

Image / vignette en vedette, image animée via Shutterstock.