Add CSS Animations: x-transition
Explore how to use the AlpineJS x-transition directive to add smooth CSS animations to elements. Understand how to customize animations with modifiers like duration, delay, opacity, scale, and origin. This lesson helps you create visually appealing transitions by combining built-in utilities and custom CSS classes for interactive web design.
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. ...