Utilisation de propriétés personnalisées pour s'efforcer

Utilisez les propriétés personnalisées CSS pour contrôler de manière flexible les variantes d'animation de la catégorie clé sans avoir besoin d'un préprocesseur! Cet article explorera comment utiliser CSS et les propriétés personnalisées uniquement pour implémenter la personnalisation des animations de l'image clé, en évitant les dépendances supplémentaires apportées en utilisant des préprocesseurs tels que des mixins.

Vous êtes-vous déjà demandé comment personnaliser les images clés de l'animation CSS sans compter sur un préprocesseur? Je me tourne souvent vers des préprocesseurs pour cela, mais ne serait-il pas préférable d'utiliser CSS natif si je peux me débarrasser de cette dépendance?

Il s'avère que le contrôle des variantes d'animation de l'image clé peut être réalisé avec CSS seul, grâce aux propriétés personnalisées CSS! Faisons le fonctionnement des clés CSS et comment tirer parti de CSS et de propriétés personnalisées pour les améliorer.

Mécanisme d'héritage d'animation CSS

Lorsque nous appliquons l'animation aux éléments, nous pouvons personnaliser certaines propriétés telles que la durée, le retard, etc. Jetons un coup d'œil à un exemple simple: il y a deux classes .walk et .run, qui utilisent tous deux la même animation (nommé Breath), mais la vitesse d'exécution de l'animation de .run est plus rapide que .walk (0,5S et 2S respectivement).

 <code>@keyframes breath { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 两者共享相同的动画，但行走比奔跑慢*/ .walk { animation: breath 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

Chaque fois qu'une animation est réutilisée, son comportement varie en fonction des propriétés que nous lui attribuons . Par conséquent, on peut dire que le comportement de l'animation hérite des éléments dans lesquels il est appliqué.

Mais comment les règles d'animation (le rapport de mise à l'échelle dans cet exemple) devraient être gérées? Retour à l'exemple de l'animation de la respiration: la classe .walk effectue une animation de respiration lentement, mais nécessite également un rapport de mise à l'échelle plus grand, nous devons donc définir sa valeur de mise à l'échelle pour être plus grand que la classe .run, tandis que la classe .run adopte des changements de mise à l'échelle plus petits et plus fréquents.

Dans Pure CSS, il est courant de copier l'animation d'origine, puis d'ajuster les valeurs directement dans la classe:

 <code>@keyframes breath { /* 与之前相同... */ } /* 与breath类似，但缩放比例不同*/ @keyframes breathDeep { from { transform: scale(0.3); } to { transform: scale(1.7); } } .walk { animation: breathDeep 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

Bien que cette approche fonctionne, une meilleure solution consiste à réutiliser les propriétés et les valeurs de l'animation en même temps! Comment faire? Utilisez le mécanisme d'héritage des variables CSS! Voyons comment l'implémenter:

 <code>/* breath动画的行为基于继承的CSS变量值*/ @keyframes breath { from { transform: scale(var(--scaleStart)); } to { transform: scale(var(--scaleEnd)); } } .walk { --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate; } .run { --scaleStart: 0.8; --scaleEnd: 1.2; animation: breath 0.5s alternate; }</code>

N'est-ce pas cool? Maintenant, nous pouvons obtenir des effets différents de la même animation sans écrire d'animations répétées !

Si vous devez aller plus loin, n'oubliez pas que nous pouvons également mettre à jour les propriétés personnalisées CSS à l'aide de JavaScript, qui non seulement met à jour les variables racine, mais aussi les variables d'éléments spécifiques. Je trouve cela très puissant car nous pouvons créer des animations plus efficaces avec JavaScript sans perdre des optimisations natives pour les animations CSS. C'est une situation gagnant-gagnant!

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!