Un didacticiel sur les animations CSS

• introduction
• Un exemple d'animations CSS
• Les propriétés de l'animation CSS
• Événements JavaScript pour les animations CSS
• Quelles propriétés vous pouvez animer à l'aide d'animations CSS

introduction

Une animation est appliquée à un élément à l'aide de laanimationbiens.

.container {
  animation: spin 10s linear infinite;
}

spinest le nom de l'animation, que nous devons définir séparément. Nous demandons également à CSS de faire durer l'animation 10 secondes, de l'exécuter de manière linéaire (pas d'accélération ni de différence de vitesse) et de la répéter à l'infini.

Vous devezdéfinir le fonctionnement de votre animationutilisantimages clés. Exemple d'animation qui fait pivoter un élément:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

À l'intérieur de@keyframesdéfinition, vous pouvez avoir autant de waypoints intermédiaires que vous le souhaitez.

Dans ce cas, nous demandons à CSS de créer la propriété de transformation pour faire pivoter l'axe Z de 0 à 360 degrés, complétant la boucle complète.

Vous pouvez utiliser n'importe quelle transformation CSS ici.

Remarquez que cela ne dicte rien sur l'intervalle temporel que l'animation doit prendre. Ceci est défini lorsque vous l'utilisez viaanimation.

Un exemple d'animations CSS

Je veux dessiner quatre cercles, tous avec un point de départ en commun, tous distants de 90 degrés les uns des autres.

<div class="container">
  <div class="circle one"></div>
  <div class="circle two"></div>
  <div class="circle three"></div>
  <div class="circle four"></div>
</div>

body {
  display: grid;
  place-items: center;
  height: 100vh;
}
.circle {
border-radius: 50%;
left: calc(50% - 6.25em);
top: calc(50% - 12.5em);
transform-origin: 50% 12.5em;
width: 12.5em;
height: 12.5em;
position: absolute;
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5);
}
.one,
.three {
background: rgba(142, 92, 205, 0.75);
}
.two,
.four {
background: rgba(236, 252, 100, 0.75);
}
.one {
transform: rotateZ(0);
}
.two {
transform: rotateZ(90deg);
}
.three {
transform: rotateZ(180deg);
}
.four {
transform: rotateZ(-90deg);
}

Vous pouvez les voir dans ce Glitch:https://glitch.com/edit/#!/flavio-css-circles

Faisons tourner cette structure (tous les cercles ensemble). Pour ce faire, nous appliquons une animation sur le conteneur, et nous définissons cette animation comme une rotation à 360 degrés:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.container {
animation: spin 10s linear infinite;
}

Le voir surhttps://glitch.com/edit/#!/flavio-css-animations-tutorial

Vous pouvez ajouter d'autres images clés pour avoir des animations plus amusantes:

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  25% {
    transform: rotateZ(30deg);
  }
  50% {
    transform: rotateZ(270deg);
  }
  75% {
    transform: rotateZ(180deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

Voir l'exemple surhttps://glitch.com/edit/#!/flavio-css-animations-four-steps

Les propriétés de l'animation CSS

Les animations CSS offrent de nombreux paramètres que vous pouvez modifier:

Leanimationproperty est un raccourci pour toutes ces propriétés, dans cet ordre:

.container {
  animation: name duration timing-function delay iteration-count direction
    fill-mode play-state;
}

Voici l'exemple que nous avons utilisé ci-dessus:

.container {
  animation: spin 10s linear infinite;
}

Événements JavaScript pour les animations CSS

En utilisant JavaScript, vous pouvez écouter les événements suivants:

• animationstart
• animationend
• animationiteration

Attention àanimationstart, car si l'animation démarre au chargement de la page, votre code JavaScript est toujours exécuté après le traitement du CSS, donc l'animation est déjà lancée et vous ne pouvez pas intercepter l'événement.

const container = document.querySelector('.container')
container.addEventListener(
  'animationstart',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationend',
  (e) => {
    //do something
  },
  false
)
container.addEventListener(
  'animationiteration',
  (e) => {
    //do something
  },
  false
)

Quelles propriétés vous pouvez animer à l'aide d'animations CSS

Beaucoup! Ce sont les mêmes que vous pouvez également animer à l'aide de transitions CSS.

Voici la liste complète:

Plus de didacticiels CSS:

• Le guide Flexbox
• Tutoriel CSS Grid
• Variables CSS (propriétés personnalisées)
• Introduction à PostCSS
• La propriété CSS margin
• Comment centrer un élément avec CSS
• Polices système CSS
• Comment imprimer votre HTML avec style
• Un guide d'introduction aux transitions CSS
• Un didacticiel sur les animations CSS
• Introduction au CSS
• Le guide CSS
• Comment configurer Tailwind avec PurgeCSS et PostCSS
• La feuille de triche de Tailwind
• Comment faire pivoter en continu une image en utilisant CSS
• Rendre un tableau réactif en utilisant CSS
• Comment déboguer CSS en divisant en deux
• Sélecteurs CSS
• Cascade CSS
• Spécificité CSS
• Sélecteurs d'attributs CSS
• Couleurs CSS
• Unités CSS
• URL CSS ()
• Typographie CSS
• Le modèle CSS Box
• La propriété de position CSS
• Requêtes multimédias CSS et conception réactive
• Requêtes de fonctionnalités CSS
• Transformations CSS
• Comment styliser des listes en utilisant CSS
• Préfixes de fournisseur CSS
• Héritage CSS
• Pseudo-classes CSS
• Pseudo éléments CSS
• Styliser les tableaux HTML avec CSS
• La propriété d'affichage CSS
• La fonction CSS calc ()
• Bordures CSS
• Importer un fichier CSS avec @import
• Gestion des erreurs CSS
• Filtres CSS
• Dimensionnement de la boîte CSS
• Arrière-plans CSS
• Commentaires CSS
• Polices CSS
• Remplissage CSS
• La propriété CSS float et la compensation
• Normalisation CSS
• La propriété CSS z-index
• Comment désactiver la sélection de texte à l'aide de CSS
• Comment mettre un élément au bas de son conteneur en utilisant CSS
• Comment inverser les couleurs en utilisant CSS
• Balises pré réactives en CSS
• Intégrations de vidéos YouTube réactives
• Quelles sont les bonnes valeurs CSS Breakpoint pour le Responsive Design?
• Comment aligner le centre dans Flexbox