Issue #4771Opened December 7, 2022by henry-mmw0 reactions

BUG: GrapesJS doesn't understand '@-webkit-keyframe' CSS rules.

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v108

Reproducible demo link

no link

Describe the bug

Add any '@-webkit-keyframe' CSS rules into the editor. Appears as '@media' instead.

I've added a fair few tools to the builder now and it seems whenever I add any webkit-keyframe css rules. They do not get understood by the editor and appear as '@media'. Just wondering if it supports this and I'm just being silly or if not is there a way i could implement this for you ?

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (2)

ronaldohoch• December 12, 20220 reactions

I just came here to open the same issue! :(

@artf, you can add this code to check it.

editor.CssComposer.addRules(`
    .animate__animated {
      -webkit-animation-duration: 300ms;
      animation-duration: 300ms;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    @keyframes fadeIn {
      0% {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }
    .animate__fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn
    }
`);

image

artf• December 13, 20220 reactions

Reported and fixed here

Related Questions and Answers

Continue research with similar issue discussions.

Issue #6152

BUG: CSS added via custom code persists after custom code component is removed

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesj...

3 answersUpdated October 9, 2024

Issue #4859

BUG: Editing CSS property sets a style to a common class instead of element

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v108Reproducible demo link https://gr...

1 answersUpdated January 23, 2023

Issue #5372

BUG: Cannot add custom AtRule (@container, @font-face)

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Windows, Chrome, React Reproducible demo l...

0 answersUpdated September 9, 2023

Issue #6263

BUG: Duplicated links are added using rte

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? ChromeReproducible demo link https://codepen...

3 answersUpdated March 5, 2025

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders