Obfuscateur de nom d'image clé CSS

Renommez chaque identifiant d'animation @keyframes dans votre CSS en noms courts et aléatoires et mettez automatiquement à jour toutes les déclarations de nom d'animation et les propriétés de raccourci d'animation. Parfait pour obscurcir le code source d'animation CSS dans les thèmes commerciaux, les systèmes de conception et les feuilles de style côté client. Choisissez parmi un nom de style hexadécimal, une lettre courte ou un nom aléatoire avec un suivi complet des références.

CSS Keyframe Name Obfuscator

Rename every @keyframes animation identifier in your CSS to short, random names and automatically update all animation-name declarations, animation shorthand properties, and vendor-prefixed references. Choose from hex-style, short letter, or random naming styles with complete reference tracking and a downloadable mapping table. All processing runs locally in your browser - no signup required.

Naming Style:

e.g. _0xa, _0x1b

Input: 1,567 bytesOutput: 1,491 bytesKeyframes: 7References updated: 8

CSS Input1,567 bytes

/* Base layout */
.container {
  display: flex;
  gap: 20px;
  padding: 2rem;
}

/* Hero section with entrance animation */
.hero {
  animation: fadeInSlideUp 0.8s ease-out;
}

@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card with pulse effect */
.card {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
}

/* Loading spinner */
.spinner {
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Notification slide-in */
.notification {
  animation: slideInRight 0.3s ease-out, fadeIn 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal with bounce */
.modal-overlay {
  animation: overlayFade 0.2s ease-out;
}

.modal-content {
  animation: modalBounce 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes overlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalBounce {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

Obfuscated CSS Output

1,491 bytes

/* Base layout */
.container {
  display: flex;
  gap: 20px;
  padding: 2rem;
}

/* Hero section with entrance animation */
.hero {
  animation: _0x0 0.8s ease-out;
}

@keyframes _0x0 {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card with pulse effect */
.card {
  animation: _0x1 2s ease-in-out infinite;
}

@keyframes _0x1 {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
  }
}

/* Loading spinner */
.spinner {
  animation: _0x2 1s linear infinite;
  -webkit-animation: _0x2 1s linear infinite;
}

@keyframes _0x2 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@-webkit-keyframes _0x2 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Notification slide-in */
.notification {
  animation: _0x3 0.3s ease-out, _0x4 0.3s ease-out;
}

@keyframes _0x3 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes _0x4 {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal with bounce */
.modal-overlay {
  animation: _0x5 0.2s ease-out;
}

.modal-content {
  animation: _0x6 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes _0x5 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes _0x6 {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

Keyframe Name Mapping (7 names)

#	Original	Obfuscated	Length Change
1	fadeInSlideUp	_0x0	-9
2	pulseGlow	_0x1	-5
3	spin	_0x2	0
4	slideInRight	_0x3	-8
5	fadeIn	_0x4	-2
6	overlayFade	_0x5	-7
7	modalBounce	_0x6	-7

Note: The obfuscation only renames keyframe identifiers and their CSS references. It does not affect JavaScript references made viaelement.style.animationNameor dynamically constructed animation name strings. Use the downloadable mapping table to manually update any external references. Vendor-prefixed declarations (@-webkit-keyframes, -webkit-animation, etc.) are fully supported.

Pourquoi utiliser notre obfuscateur de noms d'images clés CSS ?

Obfuscation instantanée des images clés : renommez tous les identifiants @keyframes en noms courts aléatoires en un seul clic. Notre obfuscateur d'images clés CSS détecte automatiquement chaque déclaration d'image clé, génère des noms obscurcis uniques et met à jour chaque référence dans votre feuille de style - aucun travail manuel n'est nécessaire.
Suivi complet des références : l'outil recherche et met à jour chaque référence à chaque nom d'image clé, y compris les déclarations de nom d'animation, les propriétés de raccourci d'animation, les propriétés préfixées par le fournisseur (-webkit-, -moz-, -o-) et les valeurs multi-animations séparées par des virgules. Aucune référence n’est laissée pour compte.
Tableau de mappage téléchargeable : gardez une trace de chaque identifiant renommé avec un tableau de mappage complet montrant les noms d'origine et leurs homologues obscurcis. Téléchargez-le au format CSV pour le stocker avec la documentation de votre projet pour référence future ou annulation manuelle.
100 % gratuit pour toujours : notre obfuscateur de noms d'images clés CSS est entièrement gratuit, sans coûts cachés, sans inscription requise et sans limites d'utilisation. Masquez autant de feuilles de style que nécessaire, aussi souvent que nécessaire : tout le traitement s'effectue localement dans votre navigateur pour une confidentialité totale.

Cas d'utilisation courants de l'obfuscateur de nom d'image clé CSS

Protection des thèmes commerciaux : masquez les noms d’images clés dans les thèmes et modèles CSS commerciaux avant la distribution. Masquez les identifiants d'animation significatifs que les concurrents pourraient utiliser pour identifier le code source de votre thème ou suivre une utilisation non autorisée.
Obfuscation du système de conception : protégez le CSS du système de conception propriétaire en obscurcissant les noms d'animation dans les bibliothèques de composants. Gardez le langage de conception de votre système d'animation confidentiel tout en garantissant que toutes les animations continuent de fonctionner correctement.
Optimisation de la construction de production : intégrez l’obscurcissement des noms d’images clés dans le cadre de votre pipeline de construction de production. Des noms obscurcis plus courts peuvent réduire légèrement la taille du fichier CSS, et les identifiants obscurcis rendent plus difficile la rétro-ingénierie des feuilles de style de production minifiées.
Protection des bibliothèques d'animation CSS : sécurisez les bibliothèques et les frameworks d'animation CSS personnalisés en masquant tous les identifiants d'images clés publiques. Protégez la propriété intellectuelle de votre collection d'animations tout en conservant toutes les fonctionnalités pour les utilisateurs finaux.
Sécurité des sites Web commerciaux : ajoutez une couche de protection supplémentaire aux sites Web des clients en masquant les noms d'animation CSS dans les feuilles de style fournies. Des noms d’animation significatifs peuvent révéler des détails de mise en œuvre que les concurrents pourraient exploiter.
Application de la conformité des licences : utilisez l'obscurcissement du nom d'image clé unique par client pour créer des empreintes digitales CSS identifiables. La table de mappage peut servir d'enregistrement de quelle version a été livrée à quel client, facilitant ainsi le suivi de la conformité des licences.

Qu’est-ce que l’obscurcissement du nom d’image clé CSS ?

L'obscurcissement des noms d'images clés CSS est le processus de remplacement des identifiants d'animation @keyframes significatifs (comme fadeInSlideUp ou pulseGlow ) par des noms courts et aléatoires (comme _0xa ou xk ) qui ne révèlent rien sur le but de l'animation. Cela rend le CSS plus difficile à lire et à procéder à une ingénierie inverse tout en gardant toutes les animations entièrement fonctionnelles.

L'obscurcissement des noms d'images clés est différent de la minification : il cible spécifiquement les informations sémantiques portées par les noms d'animation, et pas seulement la réduction de la taille du fichier. Un bon obfuscateur de nom d'image clé CSS doit également mettre à jour chaque référence aux images clés renommées dans la feuille de style pour éviter les animations cassées.

Comment fonctionne notre obfuscateur de noms d'images clés CSS

Analyser et identifier : votre CSS est analysé pour toutes les déclarations @keyframes, @-webkit-keyframes, @-moz-keyframes et @-o-keyframes. Chaque nom d'image clé unique est extrait et catalogué pour être renommé.
Générer des noms obscurcis : en utilisant le style de dénomination choisi (style hexadécimal _0xa , lettres courtes a, b, aa ou xk, zt aléatoires), l'outil génère un nom de remplacement unique pour chaque identifiant d'image clé. Le générateur garantit aucune collision avec les noms existants.
Mettre à jour toutes les références : chaque référence à chaque nom d'image clé est trouvée et mise à jour dans l'ensemble de votre feuille de style, y compris les propriétés de nom d'animation, les propriétés de raccourci d'animation et toutes les variantes préfixées par le fournisseur. Le résultat est une feuille de style entièrement fonctionnelle avec des identifiants obscurcis.

Ce qui est renommé lors d'un obscurcissement

Noms de déclaration @keyframes : chaque nom de règle @keyframes est remplacé par le nom obscurci généré. Cela inclut toutes les variantes préfixées par le fournisseur telles que @-webkit-keyframes et @-moz-keyframes.
Références de propriété animation-name : toutes les valeurs explicites de la propriété animation-name sont mises à jour pour utiliser les nouveaux noms obscurcis, y compris les valeurs multi-animations séparées par des virgules.
Références abrégées d'animation : les valeurs des propriétés abrégées d'animation sont intelligemment analysées pour identifier quel jeton est le nom de l'animation (en le distinguant de la durée, de la fonction de synchronisation et d'autres valeurs abrégées valides), et seul le nom est remplacé.
Propriétés avec préfixe du fournisseur : toutes les propriétés d'animation avec préfixe du fournisseur (-webkit-animation-name, -webkit-animation, -moz-animation, etc.) sont mises à jour pour maintenir la compatibilité entre navigateurs après obscurcissement.

Confidentialité, sécurité et disponibilité

Votre code CSS est entièrement traité dans votre navigateur à l'aide de JavaScript - aucune donnée n'est jamais transmise à un serveur. Cela signifie que les noms d'animation propriétaires, les feuilles de style confidentielles et les CSS commerciaux ne quittent jamais votre appareil. Notre obfuscateur de noms d'images clés CSS est 100 % gratuit, sans inscription requise, sans limite d'utilisation, sans restriction de taille de fichier et sans frais cachés. Utilisez-le aussi souvent que nécessaire sur n'importe quelle feuille de style pour tout projet personnel ou commercial.

Foire aux questions

Un obfuscateur de noms d'images clés CSS est un outil qui renomme les identifiants @keyframes dans les feuilles de style CSS en noms courts et aléatoires, ce qui rend le CSS plus difficile à lire tout en gardant les animations entièrement fonctionnelles. Il met également à jour toutes les références aux noms d'animation et les propriétés de raccourci d'animation dans la feuille de style pour qu'elles correspondent aux nouveaux noms.

Non. Notre obfuscateur d'images clés CSS suit soigneusement toutes les références à chaque nom d'image clé - y compris les déclarations de nom d'animation, les propriétés de raccourci d'animation, les propriétés préfixées par le fournisseur et les valeurs multi-animations séparées par des virgules - et met à jour chacune d'elles pour utiliser le nouveau nom obscurci. Tant que les noms originaux ont été correctement référencés, la version obscurcie fonctionnera de manière identique.

Absolument. Toutes les analyses CSS, le renommage des images clés et la mise à jour des références se déroulent entièrement dans votre navigateur en utilisant du JavaScript pur. Votre code source CSS ne quitte jamais votre appareil. Aucune donnée n'est téléchargée sur un serveur et il n'y a aucun suivi ni stockage du code que vous traitez.

L'outil propose trois styles de dénomination : Hex Style renomme les images clés au format _0xa, _0x1b, _0x2c (similaire aux modèles d'obscurcissement JavaScript courants), Short Letters utilise des identifiants à une et deux lettres (a, b, c, aa, ab) et Random Words utilise de courtes combinaisons prononçables (xk, qp, zt). Tous les styles produisent des noms uniques et une obscurcissement équivalent.

Oui. L'obfuscateur gère les déclarations @-webkit-keyframes, @-moz-keyframes, @-o-keyframes et @keyframes standard. Il met également à jour -webkit-animation-name, -moz-animation-name et d'autres propriétés d'animation préfixées par le fournisseur. La déclaration d'image clé et ses références sont renommées de manière cohérente pour tous les préfixes du fournisseur.

L'outil utilise une approche de correspondance : il compare les valeurs du raccourci d'animation avec la liste des noms d'images clés connus. Étant donné que les noms d'animation ne peuvent pas être des valeurs de durée ou de fonction de synchronisation valides, l'outil peut identifier de manière fiable quelle partie du raccourci correspond au nom de l'animation. Les raccourcis multi-animations séparés par des virgules sont également entièrement pris en charge.

L'outil traite uniquement le texte CSS et ne peut pas détecter les références JavaScript créées via element.style.animationName, les API CSSOM ou les chaînes de noms d'animation construites dynamiquement. Si votre code JavaScript fait référence à des noms d'images clés, ces références doivent être mises à jour séparément à l'aide de la table de mappage fournie par l'outil.

Le processus d'obscurcissement n'est pas réversible sans la table de mappage. Nous vous recommandons de conserver une copie du CSS d'origine ou de la table de mappage générée par l'outil. La table de mappage affiche chaque nom d'image clé d'origine ainsi que son nouveau nom obscurci, qui peut être utilisé pour inverser manuellement la transformation si nécessaire.

Oui, notre obfuscateur de noms d’images clés CSS est 100 % gratuit, sans coûts ni limitations cachés. Aucune inscription n'est requise, aucun niveau premium, aucune limite d'utilisation, aucune restriction de taille de fichier et aucune publicité. Utilisez-le un nombre illimité de fois pour tout projet personnel ou commercial. Tout le traitement s'effectue localement dans votre navigateur.