Un didacticiel sur les animations CSS

Les animations CSS sont un excellent moyen de créer des animations visuelles, non limitées à un seul mouvement comme les transitions CSS, mais beaucoup plus articulées. Une animation est appliquée à un élément à l'aide de laanimationbiens

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:

Biens Description
animation-name le nom de l'animation, il fait référence à une animation créée à l'aide@keyframes
animation-duration combien de temps l'animation doit durer, en secondes
animation-timing-function la fonction de minutage utilisée par l'animation (valeurs communes:linear,ease). Défaut:ease
animation-delay nombre optionnel de secondes à attendre avant de démarrer l'animation
animation-iteration-count combien de fois l'animation doit être exécutée. Attend un certain nombre, ouinfinite. Default: 1
animation-direction la direction de l'animation. Peut êtrenormal,reverse,alternateoualternate-reverse. Dans les 2 derniers, il alterne avance et recul
animation-fill-mode définit comment styliser l'élément à la fin de l'animation, après avoir terminé son nombre d'itérations.noneoubackwardsrevenir aux premiers styles d'images clés.forwardsetbothutiliser le style défini dans la dernière image clé
animation-play-state s'il est défini surpaused, il met l'animation en pause. La valeur par défaut estrunning

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:

Biens
Contexte
Couleur de l'arrière plan
position-arrière-plan
taille de fond
frontière
couleur de la bordure
largeur de la bordure
Bordure du bas
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
bordure gauche
bordure-gauche-couleur
border-left-width
rayon de la frontière
frontière droite
border-right-color
border-right-width
espacement des bordures
haut de la frontière
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
bas
boîte ombre
couleur caret
agrafe
Couleur
nombre de colonnes
écart de colonne
règle de colonne
Colonne-règle-couleur
largeur de règle de colonne
largeur de colonne
Colonnes
teneur
filtre
fléchir
flex-base
Flex-Grow
flex-shrink
Police de caractère
taille de police
ajustement de la taille de la police
étirement de la police
poids de la police
zone de grille
grille-auto-colonnes
grille-auto-flow
grid-auto-rows
grille-colonne-fin
grille-colonne-espace
grille-colonne-début
grille-colonne
écart de grille
fin de ligne de grille
grid-row-gap
grille-ligne-début
ligne de grille
zones de modèle de grille
grille-modèle-colonnes
grid-template-rows
grille-modèle
la grille
la taille
gauche
l'espacement des lettres
hauteur de la ligne
marge
marge-bas
marge gauche
marge droite
margin-top
hauteur maximum
largeur maximale
hauteur min
largeur min
opacité
ordre
contour
couleur du contour
contour-offset
contour-largeur
rembourrage
rembourrage en bas
padding-left
padding-right
rembourrage
perspective
perspective-origine
devis
droit
tab-size
texte-décoration
texte-décoration-couleur
retrait du texte
ombre de texte
Haut
transformer.
alignement vertical
visibilité
largeur
espacement des mots
z-index

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: