1. @keyframes 와 애니메이션 소개

동영상 응용에서 사용하는 언어로, 시작 프레임과 마지막 프레임 중에서 전체 정보를 갖고 있어서 가장 중심이 되는 프레임을 키 프레임 이라고 한다. 예를 들어 애니메이션에서는 처음 화면은 전체 정보를 가지고 있으나 뒤의 화면들은 전체 정보를 모두 갖고 있을 필요가 없다. 왜냐하면 앞의 전체 정보를 갖고 있는 화면과 비교해서 차이가 있는 정보만 담으면 되기 때문이다. 이때 전체 정보를 담고 있는 것이 키 프레임이다. 이렇게 키 프레임을 지정하면 전체적으로 용량을 줄일 수 있다. 애니메이션에서는 처음 화면을 키 프레임으로 지정한 후에도 각 주기마다 전체 정보를 가지고 있는 키 프레임을 만들어 넣음으로써 화면이 자연스럽게 이어지도록 한다.

과학 문화 사이언스올:key-frame의 정의란 무엇인가?

사이언스올에 따르면 key-frame이란 animation의 시작과 중간, 끝의 정보를 가지고 있는 틀이라고 생각하면 될 것 같습니다. CSS 애니메이션에서 가장 중요한 요소가 바로 @keyframes 입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어지는 부분입니다. @keyframes 안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있습니다.

2. @keyframes

여기서 우리는 애니메이션 스테이지들을 정할 것입니다. 우리의 @keyframes 속성은:

우리가 정한 이름 (여기서는 tutsFade로 정했습니다)
스테이지: 0%-100%, from (0%와 같음) 그리고 to (100%와 같음)
CSS 스타일: 각 구간에 적용시킬 스타일