Margin and padding CSS properties

Overview

Animate the element’s margin and padding dimensions easily with the margin and padding properties.

Syntax

To animate the margin, use the standard CSS margin syntax, or the m shorthand followed by the value defined in the parenthesis. The same applies for the padding property - use padding or the p shorthand.

Examples

The examples below illustrate how to use margin for hover effects, initial states, and animation timelines.

Initial value

Sometimes you need to start the animation, (or just style the element) from certain predefined state - an initial value. Because the TorusKit process the elements before the render, there is no Flash of unstyled content, so the styles are applied immediately after the page load.

Margin

We’ve added the Tailwind border border-black to the wrapper div just to show how the margin is applied.

Padding

Discrete timeline

A discrete timeline requires only two values—an initial value (optional) and a final one. This is the simplest way to animate CSS properties. In this example, the margin property is animated to a final value of 3rem. In this case, the initial value is computed automatically from the element’s CSS.

Sequenced timeline

A sequenced timeline animates properties in a sequence (series) of steps. When one step finishes, the next one begins. Each step can include one or multiple properties. In this example, we animate the margin and padding properties.

Offset timeline

In an offset timeline, intermediate steps in an animation sequence are defined by percentage offsets. This example demonstrates how to animate the above example, but with using the offsets this time. We have decided to set the initial values for both margin and padding in the step with the offset 0%, even that it’s optional. If you omit the 0% step, the initial values will be computed automatically.