Перейти к содержимому
Aback Tools Logo

Обфускатор имени ключевого кадра CSS

Переименуйте каждый идентификатор анимации @keyframes в CSS в короткие случайные имена и автоматически обновите все объявления имен анимации и свойства сокращений анимации. Идеально подходит для запутывания исходного кода CSS-анимации в коммерческих темах, системах дизайна и таблицах стилей на стороне клиента. Выберите шестнадцатеричный стиль, короткие буквы или случайное имя с полным отслеживанием ссылок.

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.

e.g. _0xa, _0x1b
Input: 1,567 bytesOutput: 1,491 bytesKeyframes: 7References updated: 8
1,567 bytes
1,491 bytes
Keyframe Name Mapping (7 names)
#OriginalObfuscatedLength Change
1fadeInSlideUp_0x0-9
2pulseGlow_0x1-5
3spin_0x20
4slideInRight_0x3-8
5fadeIn_0x4-2
6overlayFade_0x5-7
7modalBounce_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.

Зачем использовать наш обфускатор имен ключевых кадров CSS?

  • Мгновенная обфускация ключевых кадров: переименуйте все идентификаторы @keyframes в короткие случайные имена одним щелчком мыши. Наш обфускатор ключевых кадров CSS автоматически обнаруживает каждое объявление ключевого кадра, генерирует уникальные запутанные имена и обновляет каждую ссылку в вашей таблице стилей — никакой ручной работы не требуется.
  • Полное отслеживание ссылок: инструмент находит и обновляет каждую ссылку на каждое имя ключевого кадра, включая объявления имен анимации, сокращенные свойства анимации, свойства с префиксом поставщика (-webkit-, -moz-, -o-) и значения нескольких анимаций, разделенные запятыми. Никакой ссылки не остается.
  • Загружаемая таблица сопоставления: отслеживайте каждый переименованный идентификатор с помощью полной таблицы сопоставления, показывающей исходные имена и их запутанные аналоги. Загрузите файл в формате CSV и сохраните его вместе с проектной документацией для дальнейшего использования или восстановления вручную.
  • 100% бесплатно навсегда: наш обфускатор имен ключевых кадров CSS абсолютно бесплатен, не требует скрытых затрат, не требует регистрации и не имеет ограничений на использование. Запутывайте столько таблиц стилей, сколько вам нужно, и так часто, как вам нужно — вся обработка происходит локально в вашем браузере для полной конфиденциальности.

Распространенные случаи использования обфускатора имен ключевых кадров CSS

  • Защита коммерческих тем: скрывайте имена ключевых кадров в коммерческих темах и шаблонах CSS перед распространением. Скройте значимые идентификаторы анимации, которые конкуренты могут использовать для идентификации исходного кода вашей темы или отслеживания несанкционированного использования.
  • Обфускация системы дизайна. Защитите CSS собственной системы дизайна, запутывая имена анимаций в библиотеках компонентов. Сохраняйте конфиденциальность языка дизайна вашей анимационной системы, обеспечивая при этом правильную работу всех анимаций.
  • Оптимизация производственной сборки: интегрируйте обфускацию имен ключевых кадров в свой конвейер производственной сборки. Более короткие запутанные имена могут немного уменьшить размер CSS-файла, а запутанные идентификаторы затрудняют реверс-инжиниринг минифицированных рабочих таблиц стилей.
  • Защита библиотеки анимации CSS: защитите пользовательские библиотеки и платформы анимации CSS, скрывая все общедоступные идентификаторы ключевых кадров. Защитите интеллектуальную собственность своей коллекции анимации, сохраняя при этом полную функциональность для конечных пользователей.
  • Безопасность коммерческих веб-сайтов. Добавьте дополнительный уровень защиты клиентским веб-сайтам, запутывая имена CSS-анимаций в поставляемых таблицах стилей. Значимые названия анимации могут раскрыть детали реализации, которыми могут воспользоваться конкуренты.
  • Обеспечение соблюдения лицензионного соглашения: используйте уникальное обфускацию имени ключевого кадра для каждого клиента для создания идентифицируемых отпечатков CSS. Таблица сопоставления может служить записью того, какая версия была доставлена ​​какому клиенту, что помогает отслеживать соответствие лицензии.

Что такое обфускация имени ключевого кадра CSS?

Обфускация имени ключевого кадра CSS — это процесс замены значимых идентификаторов анимации @keyframes (например, FadeInSlideUp или PulseGlow) короткими случайными именами (например, _0xa или xk), которые ничего не раскрывают о цели анимации. Это затрудняет чтение и реверс-инжиниринг CSS, сохраняя при этом полную функциональность всех анимаций.

Запутывание имен ключевых кадров отличается от минимизации: оно нацелено конкретно на семантическую информацию, содержащуюся в именах анимаций, а не просто на уменьшение размера файла. Хороший обфускатор имен ключевых кадров CSS должен также обновлять каждую ссылку на переименованные ключевые кадры во всей таблице стилей, чтобы предотвратить поломку анимации.

Как работает наш обфускатор имен ключевых кадров CSS

  1. Анализ и идентификация: ваш CSS сканируется на наличие всех объявлений @keyframes, @-webkit-keyframes, @-moz-keyframes и @-o-keyframes. Каждое уникальное имя ключевого кадра извлекается и каталогизируется для переименования.
  2. Создание запутанных имен. Используя выбранный вами стиль именования (шестнадцатеричный стиль _0xa, короткие буквы a, b, aa или случайные xk, zt), инструмент генерирует уникальное замещающее имя для каждого идентификатора ключевого кадра. Генератор гарантирует отсутствие конфликтов с существующими именами.
  3. Обновить все ссылки. Каждая ссылка на каждое имя ключевого кадра находится и обновляется во всей таблице стилей, включая свойства имени анимации, свойства сокращенной анимации и все варианты с префиксами поставщика. Результатом является полнофункциональная таблица стилей со запутанными идентификаторами.

Что переименовывается во время обфускации

  • Имена объявлений @keyframes: каждое имя правила @keyframes заменяется сгенерированным запутанным именем. Сюда входят все варианты с префиксами поставщика, такие как @-webkit-keyframes и @-moz-keyframes.
  • Ссылки на свойства анимации-name: Все явные значения свойств анимации-имени обновляются для использования новых запутанных имен, включая значения нескольких анимаций, разделенные запятыми.
  • Ссылки на сокращенные обозначения анимации. Значения свойств сокращенных обозначений анимации интеллектуально анализируются для определения того, какой токен является именем анимации (отличая его от продолжительности, функции синхронизации и других допустимых сокращенных значений), и заменяется только имя.
  • Свойства с префиксом поставщика: все свойства анимации с префиксом поставщика (-webkit-animation-name, -webkit-animation, -moz-animation и т. д.) обновляются для обеспечения кросс-браузерной совместимости после обфускации.

Конфиденциальность, безопасность и доступность

Ваш CSS-код полностью обрабатывается в вашем браузере с использованием JavaScript — никакие данные никогда не передаются на какой-либо сервер. Это означает, что фирменные названия анимаций, конфиденциальные таблицы стилей и коммерческие CSS никогда не покинут ваше устройство. Наш обфускатор имен ключевых кадров CSS на 100% бесплатен, не требует регистрации, ограничений на использование, ограничений на размер файлов и скрытых платежей. Используйте его так часто, как вам нужно, в любой таблице стилей для любого личного или коммерческого проекта.

Часто задаваемые вопросы

Обфускатор имен ключевых кадров CSS — это инструмент, который переименовывает идентификаторы @keyframes в таблицах стилей CSS в короткие случайные имена, что усложняет чтение CSS, сохраняя при этом полную функциональность анимации. Он также обновляет все ссылки на имена анимаций и свойства сокращений анимации в таблице стилей, чтобы они соответствовали новым именам.

Нет. Наш обфускатор ключевых кадров CSS тщательно отслеживает все ссылки на имя каждого ключевого кадра, включая объявления имен анимации, сокращенные свойства анимации, свойства с префиксом поставщика и значения нескольких анимаций, разделенные запятыми, и обновляет каждую из них, чтобы использовать новое запутанное имя. Если исходные имена указаны правильно, запутанная версия будет работать идентично.

Абсолютно. Весь анализ CSS, переименование ключевых кадров и обновление ссылок происходит полностью в вашем браузере с использованием чистого JavaScript. Ваш исходный код CSS никогда не покидает ваше устройство. Никакие данные не загружаются ни на один сервер, а код, который вы обрабатываете, не отслеживается и не хранится.

Инструмент предлагает три стиля именования: Hex Style переименовывает ключевые кадры в формат _0xa, _0x1b, _0x2c (аналогично обычным шаблонам обфускации JavaScript), Short Letters использует одно- и двухбуквенные идентификаторы (a, b, c, aa, ab), а Random Words использует короткие произносимые комбинации (xk, qp, zt). Все стили создают уникальные имена и эквивалентную путаницу.

Да. Обфускатор обрабатывает @-webkit-keyframes, @-moz-keyframes, @-o-keyframes и стандартные объявления @keyframes. Он также обновляет -webkit-animation-name, -moz-animation-name и другие свойства анимации с префиксом поставщика. И объявление ключевого кадра, и ссылки на него последовательно переименовываются во всех префиксах поставщиков.

Инструмент использует подход сопоставления — он сравнивает значения в сокращении анимации со списком известных имен ключевых кадров. Поскольку имена анимации не могут быть допустимыми значениями длительности или функции времени, инструмент может надежно определить, какая часть сокращения является именем анимации. Также полностью поддерживаются сокращения нескольких анимаций, разделенные запятыми.

Инструмент обрабатывает только текст CSS и не может обнаружить ссылки JavaScript, сделанные через element.style.animationName, API CSSOM или динамически создаваемые строки имен анимации. Если ваш код JavaScript ссылается на имена ключевых кадров, эти ссылки необходимо обновить отдельно с помощью таблицы сопоставления, предоставленной инструментом.

Без таблицы сопоставления процесс обфускации необратим. Мы рекомендуем сохранить копию исходного CSS или таблицы сопоставлений, созданной этим инструментом. Таблица сопоставления показывает каждое исходное имя ключевого кадра вместе с его новым запутанным именем, которое при необходимости можно использовать для обратного преобразования вручную.

Да, наш обфускатор имен ключевых кадров CSS на 100% бесплатен, без каких-либо скрытых затрат или ограничений. Регистрация не требуется, нет премиум-уровня, нет ограничений на использование, нет ограничений на размер файлов и нет рекламы. Используйте его неограниченное количество раз для любого личного или коммерческого проекта. Вся обработка происходит локально в вашем браузере.