Pratique du projet : partage d'expériences sur la façon d'utiliser l'animation CSS pour créer des effets sympas

L'animation CSS est l'une des techniques couramment utilisées par de nombreux développeurs front-end. Elle peut obtenir des effets très intéressants, tels que des boutons sympas, des effets de chargement de page fluides, un contenu de page dynamique, etc. Dans cet article, je partagerai quelques expériences sur la façon d'utiliser les animations CSS pour créer des effets sympas. Jetons un coup d'oeil !

1. Bases de l'animation

Avant de commencer à créer des animations, nous devons connaître quelques bases. Tout d’abord, si nous voulons utiliser l’animation CSS, nous devons comprendre le concept « d’animation » en CSS. L'animation CSS est implémentée via des images clés. Les images clés font référence à certains états au cours d'une certaine période de temps, et il existe des transitions entre ces états. Par exemple, nous pouvons définir la position d'un élément à la première seconde sur (0,0) et la position à la deuxième seconde sur (100,100). Grâce à l'animation CSS, l'élément se déplacera le long de ce chemin.

Deuxièmement, nous devons comprendre la syntaxe de l'animation CSS. Ce qui suit est un exemple simple :

@keyframes example {
  0% {transform: translateX(0);}
  50% {transform: translateX(100px);}
  100% { transform: translateX(0);}
}

.example {
  animation: example 1s ease-in-out infinite;
}

Cet exemple spécifie l'état de l'animation via @keyframes et applique l'animation à des éléments spécifiques via la classe .example. Dans le code ci-dessus, nous définissons une animation nommée example, qui a trois états : 0 %, 50 % et 100 %. À 0 %, la position de l'élément est la position initiale, c'est-à-dire que le déplacement dans la direction de l'axe X est 0. A 50 %, la position de l'élément est déplacée de 100 pixels vers la droite. A 100%, l'élément revient à sa position d'origine. Enfin, nous appliquons une animation à l’élément .example via l’attribut animation.

Ce n'est qu'un exemple simple. Bien sûr, il existe de nombreuses autres syntaxes et propriétés qui peuvent être utilisées pour l'animation CSS, telles que la durée d'animation, le délai d'animation, la fonction de synchronisation d'animation, etc. Dans le processus de production réel, nous devons utiliser ces attributs de manière flexible en fonction de besoins spécifiques.

2. Conseils pour créer des effets sympas

Après avoir maîtrisé les connaissances de base de l'animation CSS, nous pouvons commencer à créer des effets sympas. Ci-dessous, je partagerai quelques compétences pratiques :

2.1 Créer des animations de boutons

Créer des animations de boutons est un besoin très courant. Ci-dessous, nous utiliserons le "bouton tremblant" comme exemple pour présenter comment utiliser l'animation CSS pour obtenir cet effet.

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

button {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
}

Le code ci-dessus définit une animation appelée shake puis l'applique à un bouton. Dans cette animation, nous réalisons l'effet de mouvement du bouton via l'attribut transform, et ajustons l'effet d'assouplissement de l'animation via la fonction cubique-bézier. Après avoir appliqué cette animation au bouton, vous pouvez voir l'effet de « tremblement » auquel nous nous attendons.

2.2 Images entrant et sortant

Cet effet est un peu comme un diaporama, chaque fois qu'une image apparaît par le haut ou par le bas, puis l'image précédente s'envole par le haut ou le bas. Le code suivant obtient cet effet :

@keyframes slideIn {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideOut {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

.slide-show {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.slide-show img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  margin: auto;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards; 
}

.slide-show .slide1 {
  animation-name: slideIn;
}

.slide-show .slide2 {
  animation-name: slideOut;
}

.slide-show .slide2.active {
  animation-name: slideIn;
}

Dans le code ci-dessus, nous définissons deux animations nommées slideIn et slideOut, obtenant ainsi l'effet de l'image entrant et sortant. Enveloppez ensuite les images dans un conteneur .slide-show et attribuez un nom de classe différent à chaque image (tel que .slide1, .slide2). Lorsque nous devons changer d'image, il nous suffit de changer le nom de classe de l'image actuelle en "actif", puis d'utiliser JavaScript pour faire fonctionner le DOM.

Les deux exemples ci-dessus ne sont que la pointe de l'iceberg de l'animation CSS. J'espère qu'ils pourront aider les lecteurs à mieux maîtriser l'animation CSS et à créer des effets plus sympas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!