[Styled-Components] keyframes

elinapark·2022년 3월 14일
0

색깔이 계속 바뀌는 애니메이션

styled-components 에서는 keyframes를 따로 작성해야 한다.

const ColorChange = keyframes`
    0% {
        color: #697f6e;
      }
      20% {
        color: lightgray;
      }
      40% {
        color: #697f6e;
      }
      60% {
        color: gray;
      }
      80% {
        color: #697f6e;
      }
      100% {
        color: #697f6e;
      }
`;

const Color = styled.h1`
  width: 100%;
  display: flex;
  margin-top: 1em;
  font-size: 6em;
  justify-content: center;
  animation: ${ColorChange} 5s linear infinite;
`;
profile
틀린 내용이나, 개선해야 할 사항을 발견하신다면 댓글로 편하게 남겨주세요. 감사합니다.🙇

0개의 댓글