Add CSS Animations: x-transition

AlpineJS has a robust transition utility that we can apply to elements. We can animate elements using the default transition system, but we can also use CSS classes to customize animations to our liking. We can specify animation scales and transition durations with powerful transition modifiers.

To apply transitions, we use the x-transition directive:

The example above applies a default fade and scale transitions to the p element in line 8 with a default 250- millisecond duration.

Customize transitions with modifiers

We use ...