styled-components#keyframes TypeScript Examples

The following examples show how to use styled-components#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: Dialog.tsx    From anchor-web-app with Apache License 2.0 6 votes vote down vote up 
enter = keyframes`
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
`
Example #2
Source File: LoadingIcon.tsx    From dxvote with GNU Affero General Public License v3.0 6 votes vote down vote up 
pulseKeyframes = keyframes`
  from {
    stroke-width: 3px;
    stroke-opacity: 1;
    transform: scale(0.8);
  }
  to {
    stroke-width: 0;
    stroke-opacity: 0;
    transform: scale(2);
  }
`
Example #3
Source File: PulsatingCircle.tsx    From react-tutorials with MIT License 6 votes vote down vote up 
circlePulse = (colorOne: string, colorTwo: string) => keyframes`
0% {
  fill:${colorOne};
  stroke-width:20px
}
50% {
  fill:${colorTwo};
  stroke-width:2px
}
100%{
  fill:${colorOne};
  stroke-width:20px
}
`
Example #4
Source File: styles.ts    From gobarber-web with MIT License 6 votes vote down vote up 
appearFromLeft = keyframes`
  from {
    opacity: 0;
    transform: translateX(-50px)
  }
  to {
    opacity: 1;
    transform: translateX(0)
  }
`
Example #5
Source File: Spinner.styled.ts    From frontend with GNU General Public License v3.0 6 votes vote down vote up 
dotPulsing = keyframes`
  0%, 50% {
    transform: scale(1);
    background-color: ${colors.background.Neutral80};
  }
  25% {
    transform: scale(1.5);
    background-color: ${colors.background.Primary20};

  }
`
Example #6
Source File: Container.tsx    From GraphAV with MIT License 6 votes vote down vote up 
sizeAnim = keyframes`
from{
    height: 0px;
    width: 0px;
    font-size: 0px;
}
to{
    width: 200px;
    font-size: 16px;
}
`
Example #7
Source File: styles.ts    From ecoleta with MIT License 6 votes vote down vote up 
appearFromBottom = keyframes`
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`
Example #8
Source File: Step.progress.tsx    From design-system with Apache License 2.0 6 votes vote down vote up 
pulse = ({ theme }: ThemeProps<any>) => keyframes`
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 ${theme.colors?.activeColor[100]};
	}

	80% {
		transform: scale(1);
		box-shadow: 0 0 0 .5rem rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
`
Example #9
Source File: styles.ts    From front-entenda-direito with GNU General Public License v3.0 6 votes vote down vote up 
appearFromRight = keyframes`
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`
Example #10
Source File: components.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up 
rotateImg = keyframes`
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }

  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
`
Example #11
Source File: Loader.tsx    From walletconnect-v2-monorepo with Apache License 2.0 6 votes vote down vote up 
load = keyframes`
  0% {
    transform: scale(1.0);
  }
  5% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(0.8);
  }
  95% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.0);
  }
`
Example #12
Source File: Styled.tsx    From amazon-chime-sdk-smart-video-sending-demo with Apache License 2.0 6 votes vote down vote up 
slideDownAndScaleUp = keyframes`
  0% {
    opacity: 0;
    transform: translateY(4rem) scale(0.4);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
`
Example #13
Source File: CustomSplitters.tsx    From reactoxide with MIT License 6 votes vote down vote up 
verticalStripeAnimation = keyframes`
  ${stripeVars}
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--stripe-size) * -1));
  }
`
Example #14
Source File: Styles.ts    From covidex with MIT License 6 votes vote down vote up 
FadeInText = keyframes`
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: inline;
    opacity: 0;
  }

  100% {
    display: inline;
    opacity: 1;
  }
`
Example #15
Source File: FloatingCapsule.tsx    From crypto-capsule with MIT License 6 votes vote down vote up 
mainAnimation = keyframes`
    0% {
        transform: translateY(-3%);
    }
    50% {
        transform: translateY(3%);
    }
    100% {
        transform: translateY(-3%);
    }
`
Example #16
Source File: FarmCards.tsx    From PolkaBridge-Farming with MIT License 6 votes vote down vote up 
RainbowLight = keyframes`

	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
`
Example #17
Source File: LaunchpadCards.tsx    From polkabridge-launchpad with MIT License 6 votes vote down vote up 
RainbowLight = keyframes`
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
`
Example #18
Source File: Intro.tsx    From website with Apache License 2.0 6 votes vote down vote up 
ScaleLogo = keyframes`
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
`
Example #19
Source File: AncientLabel.tsx    From client with GNU General Public License v3.0 6 votes vote down vote up 
shakeAndFlash = keyframes`
0%   { 
  transform: skewX(-30deg); 
  color: ${ANCIENT_BLUE}; 
}
5%   { 
  transform: skewX( 30deg); 
  color: ${ANCIENT_BLUE}; 
  text-shadow: -1px -1px 0 ${ANCIENT_BLUE};
}
10%  { 
  transform: skewX(-30deg); 
  color: ${ANCIENT_PURPLE}; 
}
15%  { 
  transform: skewX( 30deg); 
  color: ${ANCIENT_PURPLE}; 
  text-shadow: -1px -1px 0 ${ANCIENT_BLUE};
}
20%  { 
  transform: skewX(  0deg); 
  color: ${ANCIENT_PURPLE}; 
}
100% { 
  transform: skewX(  0deg); 
  color: ${ANCIENT_PURPLE}; 
} 
`
Example #20
Source File: AnimatedTargetValue.tsx    From nosgestesclimat-site with MIT License 6 votes vote down vote up 
evaporateAnimation = keyframes`
	5% {
		opacity: 1;
		transform: translateX(-10px) scaleY(1);
	}
	95% {
		opacity: 1;
		transform: translateX(-20px) scaleY(1);
	}
	to {
		transform: translateX(-35px) scaleY(0.1);
		opacity: 0;
	}
`
Example #21
Source File: styles.ts    From rocketredis with MIT License 6 votes vote down vote up 
rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`
Example #22
Source File: ClaimPopup.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up 
rotate = keyframes`
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }

  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
`
Example #23
Source File: message.tsx    From xiaobi with MIT License 6 votes vote down vote up 
slideIn = keyframes`
	0% {
		transform: translate(-50%, -5px);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, 0);
		opacity: 1;
	}
`
Example #24
Source File: styled.ts    From substrate-api-explorer with Apache License 2.0 6 votes vote down vote up 
fadeIn = keyframes`
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
`
Example #25
Source File: components.tsx    From limit-orders-lib with GNU General Public License v3.0 6 votes vote down vote up 
rotateImg = keyframes`
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }

  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
`
Example #26
Source File: CompositeImage.tsx    From glide-frontend with GNU General Public License v3.0 6 votes vote down vote up 
floatingAnim = (x: string, y: string) => keyframes`
  from {
    transform: translate(0,  0px);
  }
  50% {
    transform: translate(${x}, ${y});
  }
  to {
    transform: translate(0, 0px);
  }  
`
Example #27
Source File: Block.tsx    From fork-explorer with MIT License 6 votes vote down vote up 
fadeIn = keyframes`
  0% {
    opacity: 0.30;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0.30;
  }
`
Example #28
Source File: styles.ts    From nlw06-letmeask with MIT License 6 votes vote down vote up 
FadeIn = keyframes`
  from {
    right: -3em; 
    opacity: 0;
  }
  to {
    right: 0; 
    opacity: 1;
  }
`
Example #29
Source File: styles.ts    From gobarber-project with MIT License 6 votes vote down vote up 
appearFromLeft = keyframes`
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
`