styled-components/macro#keyframes TypeScript Examples

The following examples show how to use styled-components/macro#keyframes. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: animations.ts    From tezos-link with Apache License 2.0 6 votes vote down vote up 
slideLeftEnter = keyframes`
from {
  transform: translate3d(50px, 0, 0);
  opacity: 0;
}
to {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
`
Example #2
Source File: animations.ts    From tezos-academy with MIT License 6 votes vote down vote up 
fadeInFromBottom = keyframes`
  from {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
`
Example #3
Source File: animations.ts    From tezos-link with Apache License 2.0 6 votes vote down vote up 
fadeInFromRight = keyframes`
from {
  opacity: 0;
  transform: translate3d(50px, 0, 0);
}
to {
  opacity: 1;
  transform: translate3d(0px, 0, 0);
}`
Example #4
Source File: animations.ts    From tezos-academy with MIT License 6 votes vote down vote up 
slideLeftExit = keyframes`
from {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
to {
  transform: translate3d(-100px, 0, 0);
  opacity: 0;
}
`
Example #5
Source File: animations.ts    From tezos-link with Apache License 2.0 6 votes vote down vote up 
fadeInFromTop = keyframes`
  from {
    opacity: 0;
    transform: translate3d(0, -50px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0px, 0);
  }
`
Example #6
Source File: index.tsx    From react-boilerplate-cra-template with MIT License 6 votes vote down vote up 
dash = keyframes`
  0% {
    stroke-dasharray: 0, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100, 150;
    stroke-dashoffset: -24;
  }
  100% {
    stroke-dasharray: 0, 150;
    stroke-dashoffset: -124;
  }
`
Example #7
Source File: animations.ts    From tezos-link with Apache License 2.0 6 votes vote down vote up 
slideRightExit = keyframes`
from {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
to {
  transform: translate3d(50px, 0, 0);
  opacity: 0;
}
`
Example #8
Source File: Input.style.tsx    From tezos-academy with MIT License 6 votes vote down vote up 
slideDown = keyframes`
  from {
    transform: translate3d(0, -10px, 0);
    opacity:0
  }
  to {
    transform: translate3d(0, 0px, 0);
    opacity:1
  }
`
Example #9
Source File: Preloader.tsx    From revite with GNU Affero General Public License v3.0 6 votes vote down vote up 
skSpinner = keyframes`
    0%, 80%, 100% { 
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% { 
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }
`
Example #10
Source File: index.tsx    From oasis-wallet-web with Apache License 2.0 6 votes vote down vote up 
dash = keyframes`
  0% {
    stroke-dasharray: 0, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100, 150;
    stroke-dashoffset: -24;
  }
  100% {
    stroke-dasharray: 0, 150;
    stroke-dashoffset: -124;
  }
`
Example #11
Source File: animations.ts    From tezos-link with Apache License 2.0 5 votes vote down vote up 
HamburgerTopForward = keyframes`
  ${hamburgerTopForward()};
`
Example #12
Source File: index.tsx    From oasis-wallet-web with Apache License 2.0 5 votes vote down vote up 
rotate = keyframes`
  100% {
    transform: rotate(360deg);
  }
`
Example #13
Source File: animations.ts    From tezos-link with Apache License 2.0 5 votes vote down vote up 
fadeIn = keyframes`
from {
  opacity: 0;
}
to {
  opacity: 1;
}
`
Example #14
Source File: index.tsx    From react-boilerplate-cra-template with MIT License 5 votes vote down vote up 
rotate = keyframes`
  100% {
    transform: rotate(360deg);
  }
`
Example #15
Source File: MessageBase.tsx    From revite with GNU Affero General Public License v3.0 5 votes vote down vote up 
highlight = keyframes`
    0% { background: var(--mention); }
    66% { background: var(--mention); }
    100% { background: transparent; }
`
Example #16
Source File: Background.tsx    From datart with Apache License 2.0 5 votes vote down vote up 
loadingAnimation = keyframes`
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
`
Example #17
Source File: animations.ts    From tezos-academy with MIT License 5 votes vote down vote up 
HamburgerTopBackward = keyframes`
  ${hamburgerTopBackward()};
`
Example #18
Source File: index.tsx    From taskcafe with MIT License 5 votes vote down vote up 
skeletonKeyframes = keyframes`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
  `
Example #19
Source File: Button.style.tsx    From tezos-academy with MIT License 5 votes vote down vote up 
clickWave = keyframes`
  from {
    box-shadow: 0 0 0 0 ${primaryColor};
  }
  to {
    box-shadow: 0 0 0 5px ${primaryColor}00;
  }
`
Example #20
Source File: animations.ts    From tezos-link with Apache License 2.0 5 votes vote down vote up 
HamburgerBottomForward = keyframes`
    ${hamburgerBottomForward()};
  `
Example #21
Source File: animations.ts    From tezos-academy with MIT License 5 votes vote down vote up 
fadeIn = keyframes`
from {
  opacity: 0;
}
to {
  opacity: 1;
}
`
Example #22
Source File: Button.style.tsx    From tezos-link with Apache License 2.0 5 votes vote down vote up 
clickWave = keyframes`
  from {
    box-shadow: 0 0 0 0 ${primaryColor};
  }
  to {
    box-shadow: 0 0 0 5px ${primaryColor}00;
  }
`