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

A comprehensive set of accessible, easy-to-use UI components for Astro websites, built with WCAG compliance and inclusive design principles.

/**
 * Animation System
 *
 * This file defines the animation system used across components,
 * providing consistent values for component styling and animation across the system.
 */

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

@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);
  }
}

@keyframes bouncing {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-2px);
  }
  100% {
    transform: translateY(0);
  }
}

@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);
  }
}

@keyframes nudge {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(var(--rotateAmount, 10deg));
  }
  100% {
    transform: rotate(0deg);
  }
}

@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;
  }

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

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

  .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;
  }

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

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

@media (prefers-reduced-motion: reduce) {
  .animate-boop:where(:hover, :focus-visible),
  .animate-bouncing:where(:hover, :focus-visible),
  .animate-rotate:where(:hover, :focus-visible),
  .animate-nudge: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);
  }
}