Missing CSS transition properties in the editor

[lexoyo]

Description

The CSS transitions tab in the editor is missing several commonly used properties.

Missing properties

• color
• border-color
• padding
• margin
• top, bottom, left, right
• cubic-bezier(n,n,n,n) timing function

Use case

• cubic-bezier enables bouncy effects and smoother animations
• Positional properties (top, left, etc.) are needed for animated layouts

Source

Reported by @ceubri on the community forum: https://community.silex.me/d/186

[lexoyo]

CSS properties in the Style Manager are added in editor/grapesjs/css-props.ts, with editor.StyleManager.addProperty('extra', { ... }) (see the existing ones there, around lines 707 to 830, added to the "Effects" sector). Adding transition support means adding the transition properties the same way: transition-property (with options such as color, border-color, padding, margin, top, right, bottom, left), transition-duration, transition-timing-function (including a cubic-bezier option), and transition-delay.

Acceptance: the transition fields appear in the Style Manager, you can set them on an element, and they show up in the exported CSS. Please check with a simple case, for example a color transition on hover.