See CSS animations and transitions in action.
Hover over the button below. It uses CSS transitions to smoothly change its background color, text color, and scale. This provides immediate visual feedback to the user.
transition-all: Applies the transition to all animatable properties.
duration-300: Sets the transition duration to 300ms.
ease-in-out: Defines the timing function for a smooth acceleration and deceleration.
On :hover, properties like bg-blue-700 and scale-105 are applied.
This is a classic loading spinner created using @keyframes. The rotate transform property is animated from 0 to 360 degrees infinitely.
This element uses @keyframes to create a subtle pulsing glow effect, animating its box-shadow.
The @keyframes spin rule defines a rotation from 0 to 360 degrees.
The .loader class applies this animation, making it run for 1.5s, linearly, and infinitely.
The @keyframes pulse-glow rule defines changes in box-shadow at 0%, 50%, and 100%.
The .pulse-element class applies this animation.
For more complex or interactive animations (like an element following your mouse, or physics-based effects), you would typically use JavaScript with requestAnimationFrame() or animation libraries like GSAP or Anime.js.
This section is a placeholder. We could add a JavaScript animation example here later if you'd like!