Animations et transitions

Introduction

Dans le monde animé de "Pet's House", un sanctuaire virtuel pour les amateurs de bêtes, Taylor, un créatif concepteur web, entreprend un voyage pour insuffler de la vie dans le site web.

Ce laboratoire utilise des animations et des transitions CSS pour améliorer l'expérience utilisateur, rendant le site informatif, captivant et dynamique. Taylor vise à transformer les éléments statiques en fonctionnalités interactives qui captivent les visiteurs, les guidant à travers un parcours mémorable dans le domaine numérique des soins des animaux de compagnie.

Skills Graph

Élément pseudo

Dans la barre de navigation de la page Pet, lorsqu'on survole un élément de navigation, un soulignement apparaît pour cet élément de navigation.

Devrions-nous réfléchir à la manière dont cet effet est obtenu, à son affichage et à son masquage?

L'élément pseudo ::after de CSS est un outil puissant qui permet aux développeurs d'insérer du contenu supplémentaire ou des décorations après le contenu d'un élément sélectionné. Cette méthode peut être utilisée pour diverses tâches de conception et de mise en page, telles que l'ajout d'éléments décoratifs, la création de séparations claires de mise en page ou l'insertion de contenu sans modifier la structure HTML. Voici un tutoriel sur la manière d'utiliser l'élément pseudo CSS ::after.

::after est un élément pseudo qui vous permet d'insérer du contenu supplémentaire à la fin du contenu d'un élément. Ce contenu est par défaut un élément en ligne.

sélecteur::after {
  /* Propriétés CSS */
}

Utilisez la propriété content pour spécifier le contenu à insérer. Ce peut être du texte, des images ou d'autres propriétés CSS.

Par exemple, ajoutez un cœur rouge après l'élément <p> :

Nous pouvons implémenter un effet de soulignement en utilisant ::after en ajoutant ce qui suit au css :

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
}

Actuellement, rien n'a changé sur la page car la largeur est de 0. Ensuite, nous utiliserons :hover pour obtenir l'effet de soulignement en changeant la largeur en 100 % lorsque l'on survole l'élément.

Classe pseudo

Le sélecteur de classe pseudo CSS :hover est utilisé pour sélectionner les éléments survolés par le pointeur de la souris. Cela permet aux développeurs de fournir une rétroaction visuelle pour les interactions utilisateur, comme le changement de couleurs, de tailles ou l'ajout d'animations, améliorant ainsi l'expérience utilisateur.

sélecteur:hover {
  /* Propriétés CSS */
}

Par exemple, pour changer la couleur d'un élément <button> lorsque le pointeur de la souris le survole, vous pouvez utiliser le CSS suivant :

Maintenant que nous savons utiliser :hover, nous pouvons ajouter ce qui suit à style.css :

.navigation li:hover::after {
  width: 100%;
}

Jusqu'à présent, on a obtenu l'effet de soulignement lorsqu'on survole les éléments de navigation, cependant, les étudiants attentifs peuvent remarquer que l'effet de la ligne qui apparaît en glissant vers le bas est plus fluide, et c'est pour vous présenter un autre attribut CSS.

Transition

Les transitions CSS vous permettent d'ajouter un effet lors du passage d'un style à un autre, sans utiliser d'animations Flash ou de JavaScript. Vous pouvez spécifier la durée de la transition, ainsi que la manière dont la transition se produit grâce à des fonctions de temporisation.

La propriété de transition CSS est un raccourci pour quatre propriétés liées à la transition :

• transition-property : Spécifie le nom de la propriété CSS pour laquelle l'effet de transition s'applique.
• transition-duration : Définit la durée de la transition.
• transition-timing-function : Décrit comment la transition se déroulera au cours de sa durée.
• transition-delay : Spécifie un délai avant le début de la transition.

Par exemple, le code CSS suivant définit un effet de transition qui change la couleur de fond d'un élément de cyan à rgb(145, 255, 0) en 1 seconde :

Maintenant que nous savons utiliser transition, nous pouvons ajouter ce qui suit à style.css :

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

Opacité

Lorsque vous passez la souris sur l'image dans la Zone d'affichage, l'image deviendra plus transparente et le texte apparaîtra en dessous d'elle.

La propriété CSS opacity est utilisée pour définir le niveau d'opacité d'un élément. Avec cette propriété, vous pouvez contrôler la transparence d'un élément et de ses enfants, rendant l'élément complètement transparent, complètement opaque ou à tout niveau d'opacité intermédiaire. Les valeurs d'opacité vont de 0 (complètement transparent) à 1 (complètement opaque). Cette propriété est très utile pour créer des effets de dissimulation, pour souligner les éléments interactifs ou pour concevoir des interfaces avec un sens de profondeur.

sélecteur {
  opacity: valeur; /* Les valeurs vont de 0 (complètement transparent) à 1 (complètement opaque) */
}

Maintenant que nous savons utiliser opacity, nous pouvons ajouter ce qui suit à style.css :

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
}
.service figure:hover img {
  opacity: 0.5;
}
.service figure:hover figcaption {
  opacity: 1;
}

L'effet de transparence accrue est obtenu. Ensuite, nous ajoutons un peu de douceur à l'interaction.

Transform

La propriété CSS Transform vous permet de faire tourner, agrandir, incliner ou déplacer un élément, changeant ainsi la forme et la position de l'élément sans affecter la mise en page de la page. C'est un outil puissant pour créer des effets visuels dynamiques et des animations complexes.

La propriété Transform inclut les fonctions suivantes :

• rotate() : Fait tourner un élément, le paramètre étant l'angle de rotation (par exemple, rotate(45deg) pour une rotation de 45 degrés).
• scale() : Agrandit ou réduit un élément, le paramètre étant le facteur d'échelle (par exemple, scale(2) pour doubler la taille).
• translate() : Décale un élément, les paramètres étant les distances à parcourir le long de l'axe X et de l'axe Y (par exemple, translate(50px, 100px) pour se déplacer de 50px vers la droite et de 100px vers le bas).
• skew() : Incline un élément, les paramètres étant les angles d'inclinaison le long de l'axe X et de l'axe Y (par exemple, skew(30deg, 20deg) pour une inclinaison de 30 degrés le long de l'axe X et de 20 degrés le long de l'axe Y).

Par exemple, déplacez l'élément <p> de 100 pixels vers la droite sur l'axe x.

Maintenant que nous savons utiliser transform, nous pouvons ajouter ce qui suit à style.css :

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.service figure:hover figcaption {
  opacity: 1;
  transform: translateY(0%);
}

Z-Index

La propriété CSS z-index contrôle l'ordre d'empilement vertical des éléments sur une page. Lorsque les éléments se chevauchent, z-index détermine lequel élément devrait apparaître au-dessus. Elle ne peut être appliquée qu'aux éléments positionnés, c'est-à-dire ceux dont la valeur de l'attribut position est relative, absolute, fixed ou sticky. La valeur de z-index peut être positive, négative ou 0, où les valeurs plus élevées signifient que l'élément sera placé au-dessus des éléments avec des valeurs plus basses.

sélecteur {
  position: relative | absolute | fixed | sticky;
  z-index: nombre;
}

Par exemple, en supposant qu'il y ait deux éléments qui se chevauchent, nous pouvons utiliser z-index pour contrôler lequel élément apparaît au-dessus :

Maintenant que nous savons utiliser z-index, nous pouvons ajouter ce qui suit à style.css :

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
  z-index: 1;
}

Implémentation d'animation clé-frame

Il y a une animation de fade-in sur la page d'accueil lorsque nous entrons sur le site.

Les animations CSS sont un outil puissant qui permet aux développeurs de créer des effets animés pour les éléments de la page web sans utiliser JavaScript. Avec les animations CSS, vous pouvez définir une séquence d'animation qui fait passer un élément d'un état de style à un autre.

Les animations CSS reposent principalement sur deux parties clés : la règle @keyframes et les propriétés d'animation.

• Règle @keyframes : Définit les clés-frame dans la séquence d'animation. Chaque clé-frame décrit le style de l'animation à un moment précis.
• Propriétés animation : Appliquent la @keyframes définie à un sélecteur et définissent la durée, le délai, le nombre d'itérations et plus encore pour l'animation.

Par exemple :

Maintenant que nous savons utiliser l'animation, nous pouvons ajouter ce qui suit à style.css :

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
  animation: fade-in;
  animation-duration: 8s;
}
.box-feature.cover-image {
  animation: fade-in;
  animation-duration: 5s;
}

Sommaire

Dans ce laboratoire, Taylor a réussi à appliquer des animations et des transitions CSS au site web "Pet's House", créant une expérience utilisateur animée et interactive. Le passage des pages statiques aux interactions dynamiques démontre le pouvoir des indices visuels subtils pour améliorer la navigation et l'engagement sur le site web. Grâce aux animations et aux transitions, Taylor a rendu l'espace numérique de "Pet's House" plus accueillant et mémorable pour chaque visiteur.