playtpus_ui/src/components/animation.ts

React Component Libary

import { keyframes } from 'styled-components';

export const opacityAnimation = keyframes`
  0% {
    opacity: 0;
  }
  100% {
   opacity: 1;
  }
`;
export const slideIn = keyframes`
    0% { 
      transform: translateX(15rem);
    }
    100% {
      transform: translateX(0);
    }`;

export const slideInLeft = keyframes`
    0% { 
      transform: translateX(-15rem);
    }
    100% {
      transform: translateX(0);
    }`;

export const glow = keyframes`
    0% { 
      transform: scale(0.9);
      filter: drop-shadow(3px 4px 6px teal); 
    }
    100% {
      transform: scale(1);
      filter: drop-shadow(0px 0px 0px white); 
    }`;