6.7.1 키 프레임 정의하기

애니메이션은 정지된 이미지를 연속적으로 보여 줘서 움직이는 것처럼 보이게 합니다. 애니메이션 속성은 이런 애니메이션 효과를 전환 효과에 부여합니다. 그래서 애니메이션 속성은 전환 효과 속성과 다르게 키 프레임(@keyframes)을 정의해서 실행해야 합니다. 키 프레임은 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법입니다. 따라서 키 프레임에는 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일이 정의되어야 합니다.

@keyframes <키 프레임명>{
  0%{/* CSS 코드 */}
  n%{/* CSS 코드 */}
  100%{/* CSS 코드 */}
}

다음 키 프레임은 애니메이션의 시작 시점에는 배경색이 빨간색이지만, 종료 시점으로 갈수록 초록색으로 변하도록 정의합니다.

@keyframes bgchange{
  0%{background-color:red;}
  100%{background-color:green;}
}