text: import { keyframes } from 'styled-components'
  
  export const slideInLeft = keyframes`
    from {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      visibility: visible;
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  `
  
  export const fadeOutDownBig = keyframes`
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      -webkit-transform: translate3d(0, 2000px, 0);
      transform: translate3d(0, 2000px, 0);
    }
  `
  
  export const slideOutLeft = keyframes`
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
  `
  export const heartBeat = keyframes`
    0% {
      transform: scale(1);
    }
  
    25% {
      transform: scale(1.02);
    }
  `
  
  export const backgroundAnimation = keyframes`
    0% {background-position: 0%}
    100% {background-position: 100%}
  `
  
  export const slideInRight = keyframes`
    from {
      transform: translate3d(100%, 0, 0);
      visibility: visible;
    }
  
    to {
      transform: translate3d(0, 0, 0);
    }
  `
  
  export const slideOutRight = keyframes`
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    to {
      visibility: hidden;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
  `
  
  export const slideFromLeft = keyframes`
    from {
      left: 100vw;
    }
    to {
      left: 60px;
    }
  `
  
  export const bounceIn = keyframes`
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  `
  
  export const slideDown = keyframes`
    0% {
      transform: translate(0, -500px);
    }
  
    100% {
      transform: translate(0, 0);
    }
  `
  
  export const fadeIn = keyframes`
    from {
      opacity: 0;
    }
  
    to {
      opacity: 0.9;
    }
  `
  
  export const dash = keyframes`
    0% {
      stroke-dashoffset: 1000;
    }
  
    100% {
      stroke-dashoffset: 0;
    }
  `
  
  export const dashCheck = keyframes`
    0% {
      stroke-dashoffset: -100;
    }
  
    100% {
      stroke-dashoffset: 900;
    }
  `
  
  export const lineAnimation = keyframes`
    from {
      width: 0%;
    }
  
    to {
      width:100%;
    }
  `
  
  export const showAnimation = keyframes`
    from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
    to {
      opacity: 1;
    }
  `
  