accessible-astro-components/src/styles/animations.css

A set of Accessible, easy to use, Front-end UI Components for Astro.

/**
 * Accessible Astro Components - Animation Styles
 * Common animations used across components
 */

/* Common animation variables */
:root {
  --animation-timing: cubic-bezier(0.165, 0.84, 0.44, 1);
  --animation-duration-hover: 0.5s;
  --animation-duration-pulse: 2s;
}

/* Pulse animation for badges and notifications */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--pulse-color, 0, 0, 0), 0.7);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(var(--pulse-color, 0, 0, 0), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--pulse-color, 0, 0, 0), 0);
  }
}

/* Boop animation for icons and small elements */
@keyframes boop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(var(--scaleAmount, 1.1)) rotate(calc(-1 * var(--rotateAmount, 10deg)));
  }
  50% {
    transform: scale(calc(var(--scaleAmount, 1.1) - 0.05))
      rotate(calc(var(--rotateAmount, 10deg) / 2));
  }
  75% {
    transform: scale(calc(var(--scaleAmount, 1.1) - 0.08))
      rotate(calc(-1 * var(--rotateAmount, 10deg) / 4));
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Bouncing animation for buttons and interactive elements */
@keyframes bouncing {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Rotate animation for icons and loading indicators */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(var(--rotateAmount, 10deg));
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Animation utility classes */
@media (prefers-reduced-motion: no-preference) {
  .animate-boop:where(:hover, :focus-visible) {
    animation: boop var(--animation-duration-hover) var(--animation-timing) forwards;
  }

  .animate-bouncing:where(:hover, :focus-visible) {
    animation: bouncing var(--animation-duration-hover) var(--animation-timing) forwards;
  }

  .animate-rotate:where(:hover, :focus-visible) {
    animation: rotate var(--animation-duration-hover) var(--animation-timing) forwards;
  }

  /* Classes specifically for SVG animation */
  .animate-boop-svg:where(:hover, :focus-visible) svg {
    animation: boop var(--animation-duration-hover) var(--animation-timing) forwards;
  }

  .animate-bouncing-svg:where(:hover, :focus-visible) svg {
    animation: bouncing var(--animation-duration-hover) var(--animation-timing) forwards;
  }

  .animate-rotate-svg:where(:hover, :focus-visible) svg {
    animation: rotate var(--animation-duration-hover) var(--animation-timing) forwards;
  }

  /* Pulse animation */
  .animation-pulse {
    --pulse-iteration-count: var(--pulse-iterations, 3);
    animation: pulse var(--animation-duration-pulse) var(--animation-timing)
      var(--pulse-iteration-count);
  }
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-boop:where(:hover, :focus-visible),
  .animate-bouncing:where(:hover, :focus-visible),
  .animate-rotate:where(:hover, :focus-visible),
  .animate-boop-svg:where(:hover, :focus-visible) svg,
  .animate-bouncing-svg:where(:hover, :focus-visible) svg,
  .animate-rotate-svg:where(:hover, :focus-visible) svg {
    transform: none;
    animation: none;
  }

  .animation-pulse {
    animation: none;
    box-shadow: 0 0 0 2px rgba(var(--pulse-color, 0, 0, 0), 0.3);
  }
}