Comment utiliser les transitions et les animations CSS3 pour mettre en évidence les modifications de l'interface utilisateur

Les concepteurs et les artistes expérimentent depuis longtemps le mouvement, les effets et différents types d’illusions dans le but d’ajouter une couche supplémentaire à leur travail. Le mouvement op art a commencé à utiliser des illusions d'optique dans les années 1960 pour donner une impression de mouvement.

Depuis lors, de nouvelles approches ont fait leur apparition, comme l'art cinétique récemment populaire qui étend la perspective du spectateur en utilisant un mouvement multidimensionnel. Motion est également apparu en informatique avec l'invention du premier curseur clignotant en 1967.

Dans le développement front-end, les éléments DOM étaient généralement animés par JavaScript avant la sortie de CSS3, et c'est une méthode qui fonctionne toujours. les nouvelles propriétés introduites par CSS3 nous permettent d'améliorer nos conceptions avec différents effets et mouvements de manière plus intuitive.

Les deux techniques principales proposées par CSS3 sont les transitions et les animations. Dans cet article, nous examinerons ce qu’ils sont, quelle est leur différence et comment les utiliser..

Les transitions

Les transitions et les animations sont toutes deux utilisées pour visualiser les changements dans l'état d'un élément HTML par modifier une ou plusieurs de ses propriétés CSS.

La forme la plus simple de visualisation de changement d'état consiste à modifier la couleur d'un bouton ou d'un lien lorsqu'il est survolé. Lorsque cela se produit, l'élément reçoit un style légèrement différent, ce que le spectateur remarque habituellement comme si quelque chose s'était déplacé à l'écran..

La modification des propriétés CSS d'un lien en survol (ou focus ou clic) est la forme de transition la plus ancienne et la plus simple. Elle existait bien avant l'ère CSS3..

 a couleur: orange;  a: hover color: red;  a: focus color: blue;  a: visité couleur: vert; 

Les transitions sont utilisées lorsqu'un élément HTML passe d'un état prédéfini à un autre. CSS3 a introduit de nouvelles propriétés qui permettent des visualisations plus sophistiquées qu'auparavant, telles que les fonctions de minutage ou le contrôle de la durée.

Nous examinerons les nouvelles propriétés CSS dans la section suivante, après avoir compris en quoi les animations diffèrent. Pour l'instant, voyons les choses les plus importantes à savoir sur les transitions.

1. Ils ont toujours un début et une fin.
2. Les états entre les points de départ et d'arrivée sont définis implicitement par le navigateur, nous ne pouvons pas changer cela avec CSS.
3. Ils demandent déclenchement explicite, comme l'ajout d'une nouvelle pseudo-classe par CSS ou d'une nouvelle classe par jQuery.

Vous pouvez voir un bel exemple de transitions CSS3 intelligemment utilisées ci-dessous, dans lequel l'auteur révèle des informations cachées de manière non intrusive tout en orientant l'attention des utilisateurs sur le nouveau contenu..

Animations

Si nous voulons visualiser les changements d’état avec des mouvements plus complexes, ou si nous n’avons pas de déclencheur explicite, par ex. si nous voulons commencer l'effet lorsque la page se charge, les animations sont la voie à suivre.

Les animations permettent de définir un chemin plus complexe en définissant et en configurant notre propre images clés. Images clés sont des points intermédiaires dans le déroulement de l'animation, ce qui nous permet de changer le style de l'élément animé autant de fois que nous le souhaitons.

Bien que CSS3 offre d'excellents moyens de créer des animations sophistiquées, il est généralement plus difficile de les créer que les transitions. C'est pourquoi il existe de nombreuses bibliothèques d'excellentes animations, ce qui peut faciliter notre travail..

Les choses les plus importantes que vous devez savoir sur les animations CSS3 incluent:

1. ils ne nécessitent pas de déclenchement explicite, ils peuvent démarrer au chargement de la page ou lorsqu'un autre événement DOM a lieu dans le navigateur
2. ils peuvent être utilisés dans les cas où des transitions sont utilisées, par exemple lorsqu'une nouvelle classe ou une nouvelle pseudo-classe est ajoutée ou supprimée (bien que ce soit un cas d'utilisation moins fréquent)
3. ils nous demandent de définir des images clés (états intermédiaires)
4. nous pouvons spécifier le nombre, la fréquence et le style de ces images clés

Dans l'exemple ci-dessous, vous pouvez voir un menu déroulant animé. L'animation commence lorsque l'on clique sur le bouton. Ceci est réalisé en ajoutant des classes supplémentaires aux éléments de la liste avec jQuery lorsque l'événement click se produit.

Ces nouvelles classes sont animées avec spécifié @ keyframes règles dans le fichier CSS. Les classes supplémentaires sont supprimées par jQuery lorsque l'utilisateur clique sur le bouton la prochaine fois et le menu est à nouveau masqué..

Propriétés CSS et The @ keyframes At-Rule

Pour les transitions, nous pouvons utiliser soit le transition sténographie, ou 4 propriétés uniques liées à la transition: propriété de transition, durée de transition, fonction de synchronisation de transition, et délai de transition. La propriété shorthand contient toutes les propriétés simples sous une forme abrégée..

Pour les animations il y a le animation raccourci propriété à nos mains qui représente pas moins de 8 propriétés d'animation simples, à savoir nom-animation, durée d'animation, animation-minuterie-fonction, délai d'animation, animation-iteration-count, animation-direction, mode de remplissage d'animation, et animation-play-state.

La chose la plus importante avec les transitions et les animations est que nous avons toujours besoin de spécifier les propriétés CSS qui seront modifiées lors du changement d'état. Avec les transitions, cela ressemble à ceci:

 .élément fond: orange; propriété de transition: fond; durée de transition: 3s; fonction de transition de synchronisation: facilité;  .element: hover background: red; 

Nous avons spécifié le Contexte propriété, car c'est ce qui sera changé pendant la transition.

Nous pouvons modifier plusieurs propriétés CSS dans une transition, dans ce cas, le code ci-dessus serait modifié comme suit: propriété de transition: arrière-plan, bordure;. Nous pouvons également utiliser le propriété de transition: tous;, si nous ne voulons pas spécifier chaque propriété séparément.

Nous pouvons choisir la sténographie transition la propriété aussi. Si nous le faisons, nous devons toujours faire attention au bon ordre des propriétés internes (voir la syntaxe dans la documentation).

 .élément fond: orange; transition: arrière-plan 3s facilité;  .element: hover background: red; 

Si nous voulons créer une animation, nous devons spécifier le type de images clés. Les propriétés CSS doivent être modifiées séparément @ keyframes at-rules. Voici un exemple de la façon dont nous pouvons faire cela:

 .element position: relative; nom-animation: slide; animation-durée: 3s; animation-timing-function: facilité;  @keyframes slide 0% left: 0;  50% left: 200px;  100% left: 400px; 

Dans l'exemple ci-dessus, nous avons créé un effet de glissement très simple. Nous avons défini le nom-animation, puis lié à 3 images clés que nous avons spécifiées dans le @keyframes slide … at-rules. Les pourcentages se rapportent à la durée de l'animation, donc 50% se produit à 1,5 s dans l'exemple..

Nous pourrions utiliser le raccourci animation propriété aussi bien, ou pourrait définir les images clés avec le plus simple de à règle de la manière suivante:

 .element position: relative; animation: la diapositive 3 s'installe facilement;  @keyframes slide from left: 0;  à gauche: 400px; 

La création d'animations plus complexes est une forme d'art propre. Si cela vous intéresse, vous pouvez lire deux de nos tutoriels d'animation sur la création d'un rectangle de sélection avancé et sur la création d'un effet de rebond..

Lors de la création de transitions et d’animations, vous devez savoir que toutes les propriétés CSS ne peuvent pas être animées, c'est donc toujours une bonne idée de vérifier la propriété que vous voulez changer dans CSS Animatable.

Les animations et transitions CSS3 ont longtemps travaillé avec les préfixes des éditeurs, que nous n’avons plus besoin d’utiliser. Cependant, le réseau de développeurs Mozilla recommande toujours d’ajouter le préfixe. -webkit préfixe pendant un moment, car la prise en charge des navigateurs Webkit n’a atteint que récemment la stabilité.