Piratage de l'état d'animation CSS et du temps de lecture

Cet article dépensé dans les animations de CSS, adressé à l'adresse spécifique Javascript. L'auteur raconte son expérience en train de construire un jeu inspiré de Wolfenstein 3D uniquement CSS, mettant en évidence deux problèmes d'animation particulièrement délicats: déclencher une animation de tir d'arme sur les clics ennemis et la mise en œuvre du ralenti dramatique pour le coup final d'un boss. Ajouter simplement ou modifier les propriétés d'animation alors qu'une animation est déjà en cours d'exécution ne le redémarre pas ou ne le ralentit pas toujours comme prévu.

Problème 1: Replaying Animations

L'auteur explore plusieurs approches pour relasser L'animation existante, ne le redémarrant pas.

Clonage d'animation: Création de noms d'animation distincts ( spin1 , spin2 ) pour chaque déclencheur fonctionne, mais nécessite une commande de règle CSS minutieuse.

Animations en apprenti mais peut conduire à un comportement inattendu avec l'animation-mode-mode: Forward .

La clés à retenir est que vous ne pouvez pas redémarrer directement une animation CSS; Vous devez en ajouter un nouveau.

Problème 2: Ralenti

En modifiant le simple d'animation-durée tandis qu'une animation exécute les résultats des sauts. Le navigateur applique la nouvelle durée à partir du démarrage de l'animation, pas son état actuel.

Plusieurs approches sont explorées:

• Direct Animation-Durée Changement (inefficace): Changement Durée d'animation Pause médiane. Animation: Utiliser l'animation d'origine et en ajouter un plus lent avec le même point de départ conduit toujours à des sauts en raison du point de pause imprévisible.
• durée. Cependant, cela nécessite une prise en charge du navigateur pour @property .
• La technique de "changement de vitesse": Cette technique intelligente utilise des divs imbriqués, chacun avec son animation, pour basculer entre les vitesses d'animation. It's animation-specific and doesn't generalize well.
• JavaScript Solutions: JavaScript offers more robust solutions for handling animation progress and seamlessly transitioning between different animation speeds, offering flexibility for complex animations.

The article concludes by acknowledging the inspiration from other CSS-only projects and providing a comprehensive overview of the challenges and Solutions impliquées dans la manipulation des animations CSS. L'auteur encourage les lecteurs à explorer les exemples fournis et à partager leurs pensées.

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!