styled-components#keyframes JavaScript 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: bg.js    From about-1hive with GNU General Public License v3.0 6 votes vote down vote up 
fallIn = keyframes`
  from {
    transform:translateY(-100vh);
  }

  to {
    transform: translateY(-70vh);
  }
`
Example #2
Source File: index.js    From uniswap-v1-frontend with GNU General Public License v3.0 6 votes vote down vote up 
fadeIn = keyframes`
  from {
    opacity : 0;
  }

  to {
    opacity : 1;
  }
`
Example #3
Source File: PictureCarousel.jsx    From Related-Homes with MIT License 6 votes vote down vote up 
enlarge = keyframes`
  0% {
    height: 30px;
    width: 30px;
    opacity: 80%;
  }
  100% {
    height: 32px;
    width: 32px;
    opacity: 100%;
  }
`
Example #4
Source File: Layout.js    From Next.js-e-commerce-online-store with MIT License 6 votes vote down vote up 
loading = keyframes`
  12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
  25%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
  37.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
  50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
  62.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
  75%   {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
  87.5% {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
`
Example #5
Source File: loader.style.js    From viade_es2a with BSD 2-Clause "Simplified" License 6 votes vote down vote up 
cubeGridScaleDelay = keyframes`
	0%,
	70%,
	100% {
		transform: scale3D(1, 1, 1);
	}

	35% {
		transform: scale3D(0, 0, 1);
	}
`
Example #6
Source File: Spinner.jsx    From trashpanda-fe with MIT License 6 votes vote down vote up 
rotate = keyframes`
    from {
        transform: rotate(0deg);
    }
    
    to {
        transform: rotate(360deg);
    }
`
Example #7
Source File: DetailHeader.js    From airdnd-frontend with MIT License 6 votes vote down vote up 
slideUp = keyframes`
  from {
    transform: scale(1, 1) translateY(0px);
    opacity: 0.5;
  }
  to {
    transform: scale(0.3, 0.75) translateY(-80px);
    opacity: 0;
    visibility: hidden;
  }
`
Example #8
Source File: styles.js    From roomie-frontend with MIT License 6 votes vote down vote up 
ChaseDotBefore = keyframes`
    50% {
    transform: scale(0.4);
    }

    100%, 0% {
    transform: scale(1.0);
    }

`
Example #9
Source File: index.js    From gatsby-blog-mdx with MIT License 6 votes vote down vote up 
swipeLeft = keyframes`
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
    right: 35%;
    transform: translateX(-35%);
    bottom: 5px;
  }
  100% {
    opacity: 0;
    right: 35%;
    transform: translateX(-35%);
    bottom: 5px;
  }
`
Example #10
Source File: Navbar.js    From covid with GNU General Public License v3.0 6 votes vote down vote up 
fadeIn = keyframes`
  from {
    opacity:0;
  }

  to {
    opacity:1;
  }
`
Example #11
Source File: WaveLoading.js    From gophie-web with MIT License 6 votes vote down vote up 
stretchdelay = keyframes`
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
`
Example #12
Source File: styles.js    From HackShack-Session-Landing-Page with MIT License 6 votes vote down vote up 
tealSlide = keyframes`
  0% {
    transform: translateX(-5px) translateY(-5px);
  }

  30% {
    transform: translateX(5px) translateY(-5px);
  }

  60% {
    transform: translateX(5px) translateY(5px) scale(1.025);
  }

  100% {
    transform: translateX(1px) translateY(1px) scale(1.025);
  }
`
Example #13
Source File: GlobalLoading.jsx    From saasgear with MIT License 6 votes vote down vote up 
loading = keyframes`
  0% {
		width: 0;
	}

	100% {
		width: 80%
	}
`
Example #14
Source File: styles.js    From js-docs with MIT License 6 votes vote down vote up 
function generateAnimation(one, two) {
  const animationColor = keyframes`
    to {
      background: ${one};
    }

    from {
      background: ${two};
    }
  `
  const animation = css`
    animation: ${animationColor} 5s linear 0s infinite alternate;
  `
  return animation
}
Example #15
Source File: CircleLoader.styled.js    From web with GNU General Public License v3.0 6 votes vote down vote up 
rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`
Example #16
Source File: Cursor.js    From sutdmc-landing with MIT License 6 votes vote down vote up 
Mine = keyframes`
  0% {
    transform: rotate(20deg);
  }

  100% {
    transform: rotate(-30deg);
  }
`
Example #17
Source File: style.js    From react-terminal with MIT License 6 votes vote down vote up 
loadingDots = keyframes`
  0%,
  20% {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  40% {
    color: white;
    text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  60% {
    text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0);
  }
  80%,
  100% {
    text-shadow: 0.25em 0 0 white, 0.5em 0 0 white;
  }
`
Example #18
Source File: StyledBox.js    From VTour with MIT License 6 votes vote down vote up 
animationObjectStyle = function animationObjectStyle(animation, theme) {
  var bounds = animationBounds(animation.type, animation.size);

  if (bounds) {
    var animationTransition = css(["from{", ";}to{", ";}"], bounds[0], bounds[1]);
    return css(["", " ", " ", " ", ""], keyframes(["", ""], animationTransition), normalizeTiming(animation.duration, (theme.global.animation[animation.type] ? theme.global.animation[animation.type].duration : undefined) || theme.global.animation.duration), normalizeTiming(animation.delay, '0s'), animationEnding(animation.type));
  }

  return '';
}
Example #19
Source File: deadlineVisualizer.js    From deadviz with MIT License 6 votes vote down vote up 
FadeIn = keyframes`
      0% {
        opacity: 0;
        transform: scale(0);
      }
    
      50% {
        transform: scale(1.5);
      }
    
      100% {
        opacity: 1;
        transform: scale(1);
      }
`
Example #20
Source File: MainPosts.jsx    From relay_05 with MIT License 6 votes vote down vote up 
export default function MainPosts() {
  const Posts = styled.div`
    display: flex;
  `;
  const anim = keyframes`
  100% {
    transform:rotate(-30deg)
  }
`;
  const Post = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    animation-name: ${anim};
    animation-duration: 5s;
    animation-iteration-count: infinite;
  `;
  const Title = styled.span`
    fontsize: 40px;
  `;

  return (
    <>
      <Posts>
        <Post>
          <img src="https://user-images.githubusercontent.com/46068738/90863496-1c8b1f80-e3ca-11ea-986d-37e57402d0e0.jpg"></img>
          <span>포로리야</span>
        </Post>
        <Post>
          <img src="https://user-images.githubusercontent.com/46068738/90863496-1c8b1f80-e3ca-11ea-986d-37e57402d0e0.jpg"></img>
          <span>때릴거야?</span>
        </Post>
      </Posts>
    </>
  );
}
Example #21
Source File: ShelleyHaskellStakingCalculator.js    From testnets-cardano-org with MIT License 6 votes vote down vote up 
ghost = keyframes`
  from {
    transform: scale(1) translateY(-50%);
    opacity: 1;
  }

  to {
    transform: scale(2.6) translateY(-50%);
    opacity: 0;
  }
`
Example #22
Source File: TopSection.js    From dmm-web-app with MIT License 6 votes vote down vote up 
TokenWrappers = tokens.map((token, index, allTokens) => {
  const totalDuration = allTokens.length * 8;
  const delay = index * 8;
  const percentageSplit = 100 / allTokens.length

  const fadeAnimation = keyframes`
    0% { 
      opacity: 0; 
    }
    2% { 
      opacity: 1; 
    }
    ${percentageSplit}% { 
      opacity: 1; 
    }
    ${percentageSplit + 2}% { 
      opacity: 0; 
    }
    100% { 
      opacity: 0; 
    }
  `

  return styled.div`
    animation: ${fadeAnimation} ${totalDuration}s ${delay}s infinite;
  `
})
Example #23
Source File: index.js    From sorbet-finance with GNU General Public License v3.0 6 votes vote down vote up 
fadeIn = keyframes`
  from {
    opacity : 0;
  }

  to {
    opacity : 1;
  }
`
Example #24
Source File: Circle.js    From awsboilerplate with MIT License 6 votes vote down vote up 
circleFadeDelay = keyframes`
  0%,
  39%,
  100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
`
Example #25
Source File: HeroElements.js    From portfolio-react with MIT License 6 votes vote down vote up 
ScrollAnimation = keyframes`
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
`
Example #26
Source File: Circle.js    From hackchat-client with Do What The F*ck You Want To Public License 6 votes vote down vote up 
circleFadeDelay = keyframes`
  0%,
  39%,
  100% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }
`
Example #27
Source File: Loader.jsx    From full-stack-fastapi-react-postgres-boilerplate with MIT License 6 votes vote down vote up 
grow = props => keyframes`
  0% {
    height: 0;
    width: 0;
  }

  30% {
    border-width: ${px(props.size && props.size / 2.5)};
    opacity: 1;
  }

  100% {
    border-width: 0;
    height: ${px(props.size)};
    opacity: 0;
    width: ${px(props.size)};
  }
`
Example #28
Source File: Form.js    From friendbank-markey with MIT License 6 votes vote down vote up 
fadeInKeyframes = keyframes`
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
`
Example #29
Source File: index.js    From showcase with BSD Zero Clause License 6 votes vote down vote up 
rotateAndColor = keyframes`
0%{
    /* filter: hue-rotate(0deg); */
    transform: rotate(0deg);
  }
  100%{
    /* filter: hue-rotate(360deg); */
    transform: rotate(360deg);
  }
`