Ofuscador de nombres de fotogramas clave CSS

Cambie el nombre de cada identificador de animación @keyframes en su CSS a nombres cortos y aleatorios y actualice automáticamente todas las declaraciones de nombres de animación y propiedades abreviadas de animación. Perfecto para ofuscar el código fuente de animación CSS en temas comerciales, sistemas de diseño y hojas de estilo del lado del cliente. Elija entre nombres de estilo hexadecimal, letras cortas o aleatorios con seguimiento de referencia completo.

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.

¿Por qué utilizar nuestro ofuscador de nombres de fotogramas clave CSS?

Ofuscación instantánea de fotogramas clave: cambie el nombre de todos los identificadores @keyframes a nombres cortos aleatorios con un solo clic. Nuestro ofuscador de fotogramas clave CSS detecta automáticamente cada declaración de fotogramas clave, genera nombres ofuscados únicos y actualiza cada referencia en su hoja de estilo, sin necesidad de trabajo manual.
Seguimiento completo de referencias: la herramienta busca y actualiza todas las referencias a cada nombre de fotograma clave, incluidas declaraciones de nombres de animaciones, propiedades abreviadas de animaciones, propiedades con prefijo de proveedor (-webkit-, -moz-, -o-) y valores de animación múltiple separados por comas. Ninguna referencia queda atrás.
Tabla de mapeo descargable: realice un seguimiento de cada identificador cuyo nombre haya cambiado con una tabla de mapeo completa que muestra los nombres originales y sus contrapartes ofuscadas. Descárguelo como CSV para almacenarlo junto con la documentación de su proyecto para referencia futura o reversión manual.
100% gratis para siempre: nuestro ofuscador de nombres de fotogramas clave CSS es completamente gratuito, sin costos ocultos, no es necesario registrarse y no tiene límites de uso. Ofusque tantas hojas de estilo como necesite, con la frecuencia que necesite; todo el procesamiento se realiza localmente en su navegador para una total privacidad.

Casos de uso comunes para el ofuscador de nombres de fotogramas clave CSS

Protección de temas comerciales: ofusque los nombres de fotogramas clave en temas y plantillas CSS comerciales antes de su distribución. Oculte identificadores de animación significativos que los competidores podrían usar para identificar el código fuente de su tema o rastrear el uso no autorizado.
Ofuscación del sistema de diseño: proteja el CSS del sistema de diseño propietario ofuscando los nombres de las animaciones en las bibliotecas de componentes. Mantenga confidencial el lenguaje de diseño de su sistema de animación mientras garantiza que todas las animaciones sigan funcionando correctamente.
Optimización de la compilación de producción: integre la ofuscación de nombres de fotogramas clave como parte de su proceso de compilación de producción. Los nombres ofuscados más cortos pueden reducir ligeramente el tamaño del archivo CSS, y los identificadores ofuscados dificultan la aplicación de ingeniería inversa a las hojas de estilo de producción minimizadas.
Protección de bibliotecas de animación CSS: proteja las bibliotecas y marcos de animación CSS personalizados ofuscando todos los identificadores de fotogramas clave públicos. Proteja la propiedad intelectual de su colección de animaciones mientras mantiene la funcionalidad completa para los usuarios finales.
Seguridad de sitios web comerciales: agregue una capa adicional de protección a los sitios web de los clientes al ofuscar los nombres de las animaciones CSS en las hojas de estilo entregadas. Los nombres de animaciones significativos pueden revelar detalles de implementación que los competidores podrían explotar.
Aplicación del cumplimiento de licencias: utilice la ofuscación de nombres de fotogramas clave únicos por cliente para crear huellas dactilares CSS identificables. La tabla de mapeo puede servir como un registro de qué versión se entregó a qué cliente, lo que ayuda al seguimiento del cumplimiento de la licencia.

¿Qué es la ofuscación de nombres de fotogramas clave CSS?

La ofuscación de nombres de fotogramas clave CSS es el proceso de reemplazar identificadores de animación @keyframes significativos (como fadeInSlideUp o pulseGlow) con nombres cortos y aleatorios (como _0xa o xk) que no revelan nada sobre el propósito de la animación. Esto hace que el CSS sea más difícil de leer y aplicar ingeniería inversa, manteniendo todas las animaciones completamente funcionales.

Ofuscar nombres de fotogramas clave es diferente de minificar: apunta específicamente a la información semántica que contienen los nombres de las animaciones, no solo a reducir el tamaño del archivo. Un buen ofuscador de nombres de fotogramas clave CSS también debe actualizar cada referencia a los fotogramas clave renombrados en toda la hoja de estilo para evitar animaciones rotas.

Cómo funciona nuestro ofuscador de nombres de fotogramas clave CSS

Analizar e identificar: su CSS se analiza en busca de todas las declaraciones @keyframes, @-webkit-keyframes, @-moz-keyframes y @-o-keyframes. Cada nombre de fotograma clave único se extrae y cataloga para cambiarle el nombre.
Genere nombres ofuscados: utilizando el estilo de nomenclatura elegido (estilo hexadecimal _0xa, letras cortas a, b, aa o xk, zt aleatorio), la herramienta genera un nombre de reemplazo único para cada identificador de fotograma clave. El generador garantiza que no haya colisiones con nombres existentes.
Actualizar todas las referencias: cada referencia a cada nombre de fotograma clave se encuentra y actualiza en toda la hoja de estilo, incluidas las propiedades del nombre de la animación, las propiedades abreviadas de la animación y todas las variantes con prefijo del proveedor. El resultado es una hoja de estilo completamente funcional con identificadores ofuscados.

Qué se cambia de nombre durante la ofuscación

Nombres de declaración de @keyframes: cada nombre de regla @keyframes se reemplaza con el nombre ofuscado generado. Esto incluye todas las variantes con prefijo del proveedor, como @-webkit-keyframes y @-moz-keyframes.
Referencias de propiedad de nombre de animación: todos los valores de propiedad de nombre de animación explícitos se actualizan para usar los nuevos nombres ofuscados, incluidos los valores de animación múltiple separados por comas.
Referencias taquigráficas de animación: los valores de las propiedades taquigráficas de la animación se analizan de forma inteligente para identificar qué token es el nombre de la animación (distinguiéndolo de la duración, la función de sincronización y otros valores taquigráficos válidos), y solo se reemplaza el nombre.
Propiedades con prefijo del proveedor: todas las propiedades de animación con prefijo del proveedor (-webkit-animation-name, -webkit-animation, -moz-animation, etc.) se actualizan para mantener la compatibilidad entre navegadores después de la ofuscación.

Privacidad, seguridad y disponibilidad

Su código CSS se procesa completamente en su navegador utilizando JavaScript; nunca se transmiten datos a ningún servidor. Esto significa que los nombres de animaciones patentados, las hojas de estilo confidenciales y el CSS comercial nunca salen de su dispositivo. Nuestro ofuscador de nombres de fotogramas clave CSS es 100% gratuito, no requiere registro, no tiene límites de uso, no tiene restricciones de tamaño de archivo y no tiene cargos ocultos. Úselo tantas veces como necesite en cualquier hoja de estilo para cualquier proyecto personal o comercial.

Preguntas frecuentes

Un ofuscador de nombres de fotogramas clave CSS es una herramienta que cambia el nombre de los identificadores @keyframes en hojas de estilo CSS a nombres cortos y aleatorios, lo que hace que el CSS sea más difícil de leer y al mismo tiempo mantiene las animaciones completamente funcionales. También actualiza todas las referencias de nombres de animaciones y propiedades abreviadas de animaciones en toda la hoja de estilo para que coincidan con los nuevos nombres.

No. Nuestro ofuscador de fotogramas clave CSS rastrea cuidadosamente todas las referencias a cada nombre de fotograma clave, incluidas las declaraciones de nombres de animación, propiedades abreviadas de animación, propiedades con prefijo de proveedor y valores de animación múltiple separados por comas, y actualiza cada uno de ellos para usar el nuevo nombre ofuscado. Siempre que se haga referencia correctamente a los nombres originales, la versión ofuscada funcionará de manera idéntica.

Absolutamente. Todo el análisis de CSS, el cambio de nombre de fotogramas clave y la actualización de referencias se realizan completamente en su navegador utilizando JavaScript puro. Su código fuente CSS nunca sale de su dispositivo. No se cargan datos en ningún servidor y no hay seguimiento ni almacenamiento de ningún código que procese.

La herramienta ofrece tres estilos de nombres: Estilo hexadecimal cambia el nombre de los fotogramas clave al formato _0xa, _0x1b, _0x2c (similar a los patrones de ofuscación comunes de JavaScript), Letras cortas usa identificadores de una y dos letras (a, b, c, aa, ab) y Palabras aleatorias usa combinaciones cortas pronunciables (xk, qp, zt). Todos los estilos producen nombres únicos y ofuscación equivalente.

Sí. El ofuscador maneja declaraciones @-webkit-keyframes, @-moz-keyframes, @-o-keyframes y @keyframes estándar. También actualiza -webkit-animation-name, -moz-animation-name y otras propiedades de animación con prefijo del proveedor. Tanto la declaración de fotograma clave como sus referencias cambian constantemente de nombre en todos los prefijos de proveedores.

La herramienta utiliza un enfoque de coincidencia: compara los valores en la taquigrafía de la animación con la lista de nombres de fotogramas clave conocidos. Dado que los nombres de las animaciones no pueden ser valores válidos de duración o función de tiempo, la herramienta puede identificar de manera confiable qué parte de la taquigrafía es el nombre de la animación. También se admiten taquigrafías de animaciones múltiples separadas por comas.

La herramienta solo procesa texto CSS y no puede detectar referencias de JavaScript realizadas a través de element.style.animationName, API de CSSOM o cadenas de nombres de animación construidas dinámicamente. Si su código JavaScript hace referencia a nombres de fotogramas clave, esas referencias deben actualizarse por separado utilizando la tabla de mapeo proporcionada por la herramienta.

El proceso de ofuscación no es reversible sin la tabla de mapeo. Recomendamos conservar una copia del CSS original o de la tabla de mapeo generada por la herramienta. La tabla de mapeo muestra cada nombre de fotograma clave original junto con su nuevo nombre ofuscado, que se puede usar para revertir manualmente la transformación si es necesario.

Sí, nuestro ofuscador de nombres de fotogramas clave CSS es 100% gratuito, sin costos ni limitaciones ocultos. No es necesario registrarse, ni nivel premium, ni límites de uso, ni restricciones de tamaño de archivo ni publicidad. Úselo ilimitadamente para cualquier proyecto personal o comercial. Todo el procesamiento ocurre localmente en su navegador.