이 편에서 만드는 파일

web-practice/portfolio/
└── css/
    └── styles.css   ~ (@keyframes hero-enter 신규, .hero 자식 요소에 animation 추가)

17편까지 .hero는 배경·여백·글자 크기만 정리된 정적인 상태입니다. 이 편은 페이지가 열리는 순간 한 번만 실행되는 애니메이션을 추가합니다.

개념 정리

@keyframes는 애니메이션의 중간 단계를 이름 붙여 정의하는 규칙입니다. from/to(또는 0%/100%)로 시작과 끝을, 필요하면 그 사이 퍼센트로 중간 단계를 지정합니다.

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

정의한 @keyframes는 animation 속성으로 요소에 연결합니다.

transition과 animation의 차이는 트리거입니다. transition은 :hover처럼 속성 값이 바뀌는 사건이 있어야 동작하고, 시작·끝 두 상태만 표현합니다. animation은 @keyframes로 여러 단계를 정의할 수 있고, 트리거 없이 요소가 화면에 나타나는 순간(또는 클래스가 붙는 순간) 스스로 재생을 시작합니다. 히어로 등장 연출처럼 “페이지가 열리자마자 자동으로” 실행돼야 하는 효과는 animation이 맞는 선택입니다.

흔한 오해는 animation-fill-mode를 생략하는 것입니다. 기본값(none)에서는 애니메이션이 끝나는 순간 요소가 @keyframes에 정의되지 않은 원래 스타일로 돌아가 버려, opacity: 0으로 시작한 요소가 재생 후 다시 안 보이는 것처럼 깜빡일 수 있습니다.

실습

/* web-practice/portfolio/css/styles.css */
/* ...기존 리셋·토큰·레이아웃·헤더·버튼·카드 규칙 유지... */
 
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero > * {
  animation: hero-enter 600ms ease-out both;
}
 
.hero > *:nth-child(2) {
  animation-delay: 150ms;
}
 
.hero > *:nth-child(3) {
  animation-delay: 300ms;
}
 
.hero > *:nth-child(4) {
  animation-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero > * {
    animation: none;
  }
}

직접 해보기

1. animation-delay 값을 모두 0ms로 바꿔 네 요소가 동시에 나타나는 것과 순서대로 나타나는 것의 느낌 차이를 비교해 보세요.
2. @keyframes hero-enter에 50% 단계를 추가해 중간에 살짝 더 위로 올라갔다가 제자리로 내려오는 3단계 애니메이션을 만들어 보세요.

@keyframes hero-enter {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

자주 하는 실수

확인 문제

참고 자료

• MDN — CSS animations