Comment utiliser les transitions et 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 les différentes sortes 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 l'impression de mouvement.

Depuis lors, des approches nouvelles et plus récentes sont apparues, telles que 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 frontal, 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, mais les nouvelles propriétés introduites par CSS3 nous permettent d'améliorer nos designs avec différents effets et mouvements de manière plus intuitive .

Les deux principales techniques proposées par CSS3 sont les transitions et les animations. Dans ce post, nous allons voir ce qu'ils sont, quelle est la différence entre eux, et comment vous pouvez les utiliser.

Transitions

Les transitions et les animations sont utilisées pour visualiser les modifications de l'état d'un élément HTML en modifiant une ou plusieurs de ses propriétés CSS .

La forme la plus simple de la visualisation de changement d'état est la modification de la couleur d'un bouton ou d'un lien lorsqu'il est survolé. Quand cela arrive, l'élément obtient un style légèrement différent, ce qui est généralement remarqué par le spectateur comme si quelque chose s'était déplacé sur l'écran.

Changer les propriétés CSS d'un lien sur hover (ou focus, ou click) est la forme de transition la plus ancienne et la plus simple, et elle existait bien avant l'ère CSS3.

 un {couleur: orange; } a: hover {couleur: rouge; } a: focus {couleur: bleu; } a: visited {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 durée.

Nous allons voir les nouvelles propriétés CSS dans la section suivante, après avoir compris comment les animations diffèrent. Pour l'instant, voyons les choses les plus importantes que vous devez savoir sur les transitions.

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

Vous pouvez voir un bel exemple de transitions CSS3 intelligemment utilisées ci-dessous, dans lesquelles l'auteur révèle des informations cachées d'une manière non intrusive, mais qui guide toujours les utilisateurs sur le nouveau contenu.

Animations

Si nous voulons visualiser les changements d'état avec des mouvements plus compliqués, ou si nous n'avons pas de déclencheur explicite, par exemple si nous voulons démarrer l'effet quand la page se charge, les animations sont le chemin à parcourir.

Les animations permettent de définir un chemin plus complexe en définissant et en configurant nos propres keyframes . Keyframes sont des points intermédiaires au cours de l'animation, ce qui nous permet de changer le style de l'élément animé autant de fois que nous le voulons.

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 des transitions, c'est pourquoi il existe de nombreuses bibliothèques d'animation, 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 pseudo-classe est ajoutée ou supprimée (bien que ce soit un cas d'utilisation moins fréquent)
3. ils nous obligent à 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é cool. L'animation commence lorsque nous cliquons 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 les règles @keyframes spécifiées 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 @keyframes At-Rule

Pour les transitions, nous pouvons utiliser soit la propriété raccourcie de transition, soit 4 propriétés liées à une transition unique: propriété de transition-property, transition-duration transition-timing-function, transition-timing-function transition-delay . La propriété raccourci contient toutes les propriétés simples sous une forme abrégée.

Pour les animations, il y a la propriété raccourci d' animation dans nos mains qui ne représente pas moins de 8 propriétés d'animation, nommément animation-name - animation-duration, animation-duration - animation-timing-function, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, et animation-play-state .

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

 .élément {arrière-plan: orange; propriété de transition: arrière-plan; durée de transition: 3s; transition-timing-function: facilité d'accès; } .element: hover {arrière-plan: rouge; } 

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

Nous pouvons modifier plus d'une propriété CSS dans une transition, dans ce cas le code ci-dessus serait modifié comme ceci: transition-property: background, border; . Nous pouvons également utiliser la transition-property: all;, si nous ne voulons pas spécifier chaque propriété séparément.

Nous pouvons également choisir la propriété de transition raccourcie. Si nous le faisons, nous devons toujours prêter attention au bon ordre des propriétés internes (voir la syntaxe dans les docs).

 .élément {arrière-plan: orange; transition: contexte 3s facilité; } .element: hover {arrière-plan: rouge; } 

Si nous voulons créer une animation, nous devons spécifier les keyframes associées. Les propriétés CSS doivent être modifiées dans des @keyframes at-rules définies @keyframes . Voici un exemple de comment nous pouvons faire ceci:

 .element {position: relative; nom-animation: diapositive; animation-durée: 3s; animation-timing-function: facilité d'accès; } @keyframes slide {0% {left: 0; } 50% {gauche: 200px; } 100% {gauche: 400px; }} 

Dans l'exemple ci-dessus, nous avons créé un effet de glissement très simple. Nous avons défini le animation-name, puis nous avons lié 3 images clés que nous avons spécifiées dans la @keyframes slide { ... } at-rules. Les pourcentages se réfèrent à la durée de l'animation, donc 50% arrive à 1.5s dans l'exemple.

Nous pourrions également utiliser la propriété d' animation raccourcie, ou définir les images clés avec la règle la plus simple from {} to {} de la façon suivante:

 .element {position: relative; animation: slide 3s facilité; } Diapositive @keyframes {from {left: 0; } à {left: 400px; }} 

La création d'animations plus complexes est sa propre forme d'art, si vous êtes intéressé, vous pouvez lire deux de nos tutoriels d'animation sur la façon de créer un chapiteau avancé, et comment créer 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 . Il est donc conseillé de vérifier la propriété que vous souhaitez modifier dans le CSS Animable.

Les animations CSS3 et les transitions ont longtemps fonctionné avec les préfixes des fournisseurs, ce que nous n'avons plus besoin d'utiliser, cependant le Mozilla Developer Network recommande toujours d'ajouter le préfixe -webkit pendant un moment, comme le support pour les navigateurs basés sur Webkit seulement stabilité récemment obtenue.

Comment obtenir les évaluations de Goodreads via l'API

Pour les amateurs de livres qui ont un goût pour un genre spécifique, ils vont probablement vérifier la recommandation d'un ami que de suivre une liste de best-sellers. C'est pourquoi Amazon Goodreads est un site favori pour les lecteurs avides. C'est un endroit où vous pouvez trouver une vaste base de données de livres, des recommandations et des critiques par d'autres amateurs de livres.Good

(Conseils techniques et de conception)

Fonctionnalité récente de Google App - Tout ce qu'il faut savoir

Pour ce qui est de l'historique des recherches, nous savons que Google enregistre vos recherches dans la page "Mon activité" en tant qu'enregistrements de texte. Toutefois, il semble que Google soit à la hauteur de l'importance de l'enregistrement de votre recherche sur sa propre application, car l'application Google met désormais en cache votre historique de recherche sous la forme de cartes visuelles . D

(Conseils techniques et de conception)