cinny/src/app/styles/Animations.css.ts

import { keyframes, style } from '@vanilla-extract/css';
import { color, toRem } from 'folds';

const spin = keyframes({
  from: { transform: 'rotate(0deg)' },
  to: { transform: 'rotate(360deg)' },
});

const wobble = keyframes({
  '0%': {
    transform: 'translateX(0) rotateZ(0deg)',
  },
  '20%': {
    transform: `translateX(-${toRem(4)}) rotateZ(-4deg)`,
  },
  '40%': {
    transform: `translateX(${toRem(4)}) rotateZ(4deg)`,
  },
  '60%': {
    transform: `translateX(-${toRem(3)}) rotateZ(-3deg)`,
  },
  '80%': {
    transform: `translateX(${toRem(3)}) rotateZ(3deg)`,
  },
  '100%': {
    transform: 'translateX(0) rotateZ(0deg)',
  },
});

const glowPulse = keyframes({
  '0%': {
    boxShadow: `0 0 0 ${toRem(0)} ${color.Success.ContainerActive}`,
  },
  '100%': {
    boxShadow: `0 0 0 ${toRem(8)} ${color.Success.ContainerActive}`,
  },
});

export const WobbleAnimation = style({
  animation: `${wobble} 2000ms ease-in-out`,
  animationIterationCount: 'infinite',
});

export const GlowAnimation = style({
  animation: `${glowPulse} 2000ms ease-out`,
  animationIterationCount: 'infinite',
});

export const CallAvatarAnimation = style({
  animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
  animationIterationCount: 'infinite',
});

export const SendingSpinClass = style({
  display: 'inline-block',
  animation: `${spin} 900ms linear infinite`,
  transformOrigin: 'center',
});

const msgAppearKeyframe = keyframes({
  from: { opacity: 0.4, transform: 'scale(0.97)' },
  to: { opacity: 1, transform: 'scale(1)' },
});

export const MsgAppearClass = style({
  '@media': {
    '(prefers-reduced-motion: no-preference)': {
      animation: `${msgAppearKeyframe} 150ms ease-out both`,
    },
  },
});