import { css , keyframes } from 'styled-components' ; keyframes returns { keyframes } example export const slidInCenter = keyframes `
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const tiltIn = keyframes `
  0% {
    transform: scale(0.7);
    opacity: 0.6;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const trackingInExpand = keyframes `
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const slideTop = keyframes `
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const slideBottom = keyframes `
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const slideOutKeyframes = keyframes `
  0% {
    transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
  54% {
    transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
` ; keyframes returns { keyframes } example export const rollInLeft = keyframes `
  0% {
    transform: translateX(-400px) rotate(-360deg);
    filter: blur(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    filter: blur(0);
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const rollInRight = keyframes `
  0% {
    transform: translateX(400px) rotate(360deg);
    filter: blur(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) rotate(0deg);
    filter: blur(0);
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const floatKeyframes = keyframes `
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
` ; keyframes returns { keyframes } example export const floatingMobileKeyframes = keyframes `
  0% {
    transform: translatey(0px) translateX(0px);

  }
  50% {
    transform: translatey(-34px) translateX(10px);
  }
  100% {
    transform: translatey(0px) translateX(0px);
  }
` ; keyframes returns { keyframes } example export const floatingWatchKeyframes = keyframes `
  0% {
    transform: translatey(0px) translateX(0px);

  }
  50% {
    transform: translatey(-40px) translateX(-5px);
  }
  100% {
    transform: translatey(0px) translateX(0px);
  }
` ; keyframes returns { keyframes } example export const likeKeyframe = keyframes `
  0% {
    transform: rotateX(-100deg);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: rotateX(0deg);
    transform-origin: top;
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const windowsSlitOutKeyframes = keyframes `
  0% {
    transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
  54% {
    transform: translateZ(-150px) rotateX(87deg);
    opacity: 0.6;
  }
  100% {
    transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
` ; css returns { keyframes } export const showScrollbarStyles = css `
  ::-webkit-scrollbar {
    display: block;
    width: 2px;
    height: 1px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
  }

  ::-webkit-scrollbar-thumb {
    background: ${ ( { theme } ) => theme . colors . blue . icon };
  }
` ; keyframes returns { keyframes } example export const slideInRight = keyframes `
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
` ; keyframes returns { keyframes } example export const slideInLeft = keyframes `
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
` ;