Transitions make animations between different states of an element smoother and more natural. Use them alongside features like Transform, Opacity, Size, and more to create polished, interactive pages.

Add a Transition

1. Select an element on the canvas.

2. In the Design tab of the Right Panel, scroll to the Transitions section.

3. Click the plus (+) icon to add a new transition.

4. Click on the newly created transition layer to configure its settings.

Select Transition Type

Click the dropdown at the top of the panel to select which property the transition applies to. 

Options include:

• All Properties
• Opacity
• Margin
• Padding
• Border
• Transform
• Filter
• Flex
• Background Color
• Background Position
• Box Shadow
• Text Shadow
• Width
• Height
• Max Width
• Max Height
• Min Width
• Min Height
• Border Width
• Border Color
• Border Radius
• Font Color
• Font Size
• Line Height
• Letter Spacing
• Text Indent
• Word Spacing
• Top
• Right
• Bottom
• Left
• Z-Index
• Margin Top
• Margin Right
• Margin Bottom
• Margin Left
• Padding Top
• Padding Right
• Padding Bottom
• Padding Left

Note: Scroll down to see all available options.

Choose a Curve

The Curve controls how the transition progresses over time. There are two modes: Ease and Spring.

Ease

Choose from the following preset curves or define your own:

• Linear – Maintains an even speed throughout.

• Ease – Speeds up in the middle and slows down at the end.

• Ease In – Starts slowly and increases in speed.

• Ease Out – Starts quickly and slows down toward the end.

• Ease In Out – Starts slowly, speeds up, then slows down again.

• Custom – Lets you define the curve manually using the Bezier graph. Drag the two handles to adjust the curve shape. The Bezier field shows the corresponding values.

Spring

Spring gives your transition a natural, physics-based bounce effect. To apply it, simply switch to its dedicated tab and configure settings if needed.

Learn more about Spring Transitions.

Set the Duration and Delay

• Duration – How long the transition takes to complete. Set the value in milliseconds.

• Delay – How long to wait before the transition starts. Set the value in milliseconds.

Set the Bezier Values

Shows the cubic bezier values that correspond to the selected curve.

When the Curve is set to Custom, you can edit these values directly or drag the handles on the graph below to adjust the curve shape.

Edit the Curve Graph

A visual representation of how the transition progresses over time. 

Editing the graph directly by dragging the handles will automatically switch the curve to Custom. 

The Bezier field updates in real time to reflect the current values.

Preview the Transition

Use the Hover to Preview bar at the bottom of the panel to preview the transition before publishing.

📝 Note: These settings are also available throughout Kirki as the Custom Timing Editor, including the Interaction Response Editor and Text Animations. In those contexts, the transition type dropdown isn’t shown since the animated property is already determined by the interaction itself, but all other settings work the same way.

Example: Button Hover Effect

Here’s how to style a CTA button so it scales smoothly and changes background color on hover.

Step 1 – Set the Hover State

1. Select the Button, click the Element States dropdown next to Classes in the Right Panel → Design tab, and switch to the Hovered state.

2. In the Style section, change the Fill color to your desired hover color.

3. In the Transforms section, set Scale X and Y to 1.05.

The button will scale up and shift color when hovered over, but it’ll be very abrupt.

Step 2 – Add the Transitions

1. Switch back to the Default state from the Element States dropdown.

2. Scroll to the Transitions section and click the plus (+) icon to add a transition.

3. Click on the newly added transition to open its settings, set the Type to Background Color, Duration to 300ms, and Curve to Ease.

4. Click the plus (+) icon again to add a second transition.

5. Set this one’s Type to Transform, Duration to 300ms, and Curve to Ease.

The button will now smoothly scale up and shift color when hovered over.