React animation keyframes

const SiteNameAnimation = keyframes`
  0%{
    opacity: 0;
    transform: translateY(25px);
  }
  50%{
    transform: translateY(15px);
  }
  100%{
    opacity: 1;
    transform: none;
  }
`;

export const SiteNameWrap = styled.article`
  margin-left: 80px;
  padding-top: 120px;

  animation: ${SiteNameAnimation} 2s linear 1;

  header:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    gap: 15px 45px;
  }
  header h2 {
    width: 400px;
    font-size: 30px;
    font-family: "KOTRA_BOLD-Bold", sans-serif;
  }
`;