Comment jouer et mettre en pause les animations CSS avec des propriétés personnalisées CSS

Jouer et faire une pause d'animations CSS: utilisez les propriétés personnalisées CSS pour contrôler

Cet article traite de l'animation CSS @keyframes , en se concentrant sur la façon de faire une pause et de contrôler l'animation. Bien que animation-play-state puisse être utilisée pour coopérer avec JavaScript pour le contrôle, il existe de nombreux détails. Nous présenterons une méthode de configuration plus flexible qui utilise les propriétés personnalisées CSS pour permettre un contrôle fin des animations.

L'importance de faire une pause d'animations

Lors du développement d'une diapositive axée sur le CSS, j'ai remarqué un phénomène intéressant: les animations qui ne sont pas dans la fenêtre fonctionnent toujours! Cela me fait réfléchir: ces animations exécutées consomment-elles toujours des ressources CPU / GPU, affectant ainsi les performances de la page?

Bien que le panneau de performance des Devtools ne puisse pas afficher directement la consommation d'animation des trames "hors écran", l'animation ne fait pas une pause lors du défilement de la diapositive et de retour à nouveau, mais continue de fonctionner vers l'écran suivant.

Par conséquent, il est crucial d'étudier comment les animations sont interrompues, ce qui est lié à:

1. Performance: Évitez la consommation de ressources inutile.
2. Contrôle: fournit un contrôle des utilisateurs sur l'animation.
3. Accessibilité: considérant que certains utilisateurs peuvent être sensibles aux animations.

Façons de base de faire une pause animation

Dans CSS, la seule façon de suspendre l'animation est d'utiliser animation-play-state et de définir sa valeur pour paused :

 .Paused {
  Animation-Play-State: USUSE;
}

Dans JavaScript, cette propriété est animationPlayState , et la méthode de réglage est la suivante:

 element.style.animationplayState = 'Pause';

Nous pouvons créer une baisse de jeu / pause en lisant la valeur actuelle de animationPlayState :

 const Running = element.style.animationPlayState === 'Running';
element.style.animationplayState = Running? «pause»: «courir»;

Une autre façon de faire une pause d'animation consiste à définir animation-duration sur 0s . L'animation est en fait toujours en cours d'exécution, mais comme la durée est nulle, aucune action n'est vue. Cependant, ce n'est pas une véritable pause.

Suppression directe de l'animation ( animation: none !important; ) n'est pas une véritable pause non plus.

Propriétés personnalisées avec des attributs de données et CSS

Nous utilisons des attributs de données (tels que data-animation ) comme sélecteur CSS et utilisons les attributs personnalisés CSS comme valeur de l'attribut d'animation:

<div data-animation=""></div>

 [animation des données] {
  animation:
    var (- animn, aucun)
    var (- animdur, 1s)
    var (- animtf, linéaire)
    var (- animdel, 0s)
    var (- animique, infini)
    var (- animdir, alternative)
    var (- animfm, aucun)
    var (- animps, en cours d'exécution);
}

Grâce à des propriétés personnalisées, nous pouvons contrôler tous les aspects de l'animation. L'avantage des propriétés personnalisées CSS est qu'ils peuvent être lus et définis dans CSS et JavaScript, et peuvent réduire la quantité de code CSS.

L'animation elle-même utilise un sélecteur de classe et met à jour les variables dans le sélecteur [data-animation] :

 / * Classe d'animation * /
.A-Pulse {
  --animn: Pulse;
}
.A-Slide {
  --animdur: 3s;
  --animn: glissade;
}

/ * Image clé * /
@KeyFrames Pulse {
  / * ... * /
}
@KeyFrames Slide {
  / * ... * /
}

Exemple: Utilisez Trick Trick pour faire une pause d'animation

Créez une case à cocher pour contrôler les pauses pour toutes les animations:

<input type="checkbox" id="data-animation-pause">

 [Data-Animation-Pause]: vérifié ~ [animation de données] {
  --anIMPS: pause;
}

Cliquez sur la case pour faire une pause / lire toutes les animations sans javascript.

Diaporama CSS uniquement

J'utilise<details></details> Les balises créent une diapositive qui change automatiquement les diapositives via la autoplay de l'animation active, chaque diapositive a sa propre animation secondaire. L'attribut --animps contrôle l'état de lecture de l'animation, --img-animps contrôle l'état de lecture de l'animation secondaire.

Pour éviter la surcharge du GPU, idéalement, l'animation principale doit interrompre toutes les animations secondaires. Chrome Browser (actuellement) peut mettre à jour les propriétés personnalisées CSS à partir de @keyframes Animation.

Mettez à jour --img-animps dans l'animation principale @keyframes :

 @KeyFrames AutoPlay {
  / * ... * /
  51% {--img-anIMPS: USUSE} / * STOP! * /
  / * ... * /
}

Pour être compatible avec d'autres navigateurs, la valeur initiale doit être définie en running .

Activer prefers-reduced-motion

Nous pouvons utiliser la requête multimédia prefers-reduced-motion pour répondre aux préférences des utilisateurs:

 @Media (préfère-réduction du mouvement) {
  [data-animation = "alternative"] {
    --animdur: 4S;
    --animn: opacité;
  }
  / * ... * /
}

Pause animation à l'aide de javascript

Nous pouvons utiliser JavaScript pour itérer tous les éléments [data-animation] et changer l'attribut --animps :

 // ... code javascript ...

Utilisation d'intersectionObserver

Pour jouer et faire une pause automatiquement, nous pouvons utiliser IntersectionObserver :

 // ... code javascript ...

Ajouter l'audio à la diapositive (bonus)

Ajoutez une balise audio et contrôlez sa lecture et pause en javascript:

<audio src="your-audio.mp3"></audio>

 // ... code javascript ...

Grâce aux méthodes ci-dessus, nous pouvons contrôler de manière flexible la lecture et la pause des animations CSS et améliorer les performances et l'accessibilité des pages.

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!