CSS 키프레임 애니메이션 생성 방법

CSS 애니메이션을 만들기 전에 알아둘 점

CSS 애니메이션을 처음 구성할 때는 움직임뿐 아니라 이름과 재생 방식도 함께 정해야 합니다. 이 도구는 이름, 재생 시간, 속도 곡선, 재생 방향, 종료 후 상태를 입력으로 받아 CSS 텍스트를 만듭니다. 결과에는 키프레임 정의와 요소에 애니메이션을 연결하는 선언이 포함됩니다. 따라서 빈 문서에서 효과의 뼈대를 작성할 때 활용하기 좋습니다.

입력 항목은 서로 다른 역할을 가집니다. 이름은 키프레임을 가리키는 식별자로 쓰입니다. 재생 시간은 애니메이션이 진행되는 시간을 나타냅니다. 속도 곡선은 진행 속도의 변화를 정합니다. 재생 방향은 진행 순서를 정하고, 종료 후 상태는 재생이 끝난 뒤의 상태를 정합니다. 다섯 항목을 조합하면 같은 움직임도 여러 방식으로 연결할 수 있습니다.

기본 결과의 움직임은 두 단계로 구성됩니다. 시작 시점에는 요소가 보이지 않고 아래쪽에 있으며, 끝 시점에는 보이면서 원래 세로 위치로 돌아옵니다. 그러므로 별도의 단계 설계 없이도 등장 효과의 CSS 초안을 확인할 수 있습니다.

설정을 입력하고 CSS 텍스트 확인하기

1. 먼저 만들려는 효과에 맞는 이름을 정합니다. 예를 들어 카드가 들어오는 효과라면 slideIn처럼 역할을 드러내는 이름을 생각할 수 있습니다. 이름은 결과의 키프레임과 요소 적용 선언을 연결하는 기준이 되므로, 결과를 확인할 때 입력한 값과 일치하는지 살펴보는 편이 좋습니다.

2. 이름을 입력하지 않은 경우를 구분해 확인합니다. 입력란을 아예 생략하면 기본 이름인 fadeIn이 사용됩니다. 반대로 입력란에 빈 값을 넣으면 생성 전에 이름이 myAnimation으로 바뀝니다. 두 상황의 처리 방식이 다르므로, 원하는 이름을 관리해야 한다면 공백 상태에 기대지 말고 사용할 이름을 직접 입력합니다.

3. 재생 시간을 정합니다. 숫자 2를 입력하면 생성된 애니메이션 선언에서 2s처럼 초 단위가 붙습니다. 숫자와 단위가 결과에서 어떻게 이어지는지 확인하면 스타일시트에 적용하기 전에 시간 표기를 파악할 수 있습니다. 필요한 경우 목적에 맞는 다른 입력값을 넣고 새 결과를 확인합니다.

4. 속도 곡선을 선택합니다. 이 항목을 생략하면 ease가 사용됩니다. 값은 애니메이션 진행의 느낌을 조정하는 설정으로 결과 선언에 반영됩니다. 단순한 등장 효과를 확인하는 단계라면 기본값으로 먼저 결과를 만들고, 움직임의 진행감이 맞지 않을 때 선택을 바꿉니다.

5. 재생 방향을 정합니다. 별도 입력이 없으면 normal이 적용됩니다. 방향은 키프레임 진행 순서에 관계되는 설정이므로, 결과의 선언에 선택한 방향이 들어갔는지 확인합니다. 이름이나 시간만 바꾸는 경우에는 이 항목을 기본값으로 둘 수 있습니다.

6. 종료 후 상태를 선택합니다. 값을 생략하면 none이 사용됩니다. 이 설정은 애니메이션 선언에 함께 들어가므로, 재생이 끝난 뒤 어떤 상태를 사용할지 정한 다음 결과 텍스트에서 항목을 찾습니다. 다른 입력과 혼동하지 않도록 이름, 시간, 방향과 나누어 확인합니다.

7. 생성 동작을 실행하고 CSS 텍스트를 읽습니다. 성공한 결과에는 키프레임 애니메이션을 정의하는 부분과 특정 요소에 애니메이션을 적용하는 선언이 함께 나타납니다. 먼저 이름과 시간의 표기를 확인한 뒤 속도 곡선, 방향, 종료 후 상태를 차례로 대조하면 입력 누락을 찾기 쉽습니다.

8. 결과가 목적에 맞지 않으면 한 항목씩 바꾸어 다시 생성합니다. 이름과 시간만 먼저 조정하면 어떤 설정이 달라졌는지 비교하기 쉽습니다. 그다음 속도 곡선이나 방향을 바꾸어 선언의 변화를 확인합니다. 적용하려는 요소와 결과 선언의 연결도 확인한 뒤 필요한 CSS 위치에 옮깁니다.

결과의 움직임과 조정 범위 읽기

생성된 텍스트의 키프레임은 0%와 100%라는 두 단계로 이루어집니다. 0%에서는 불투명도가 0이고 세로 이동 값이 20px입니다. 100%에서는 불투명도가 1로 바뀌고 세로 이동 값이 0이 됩니다. 이 조합은 아래에서 위로 올라오면서 나타나는 형태로 읽을 수 있습니다.

결과를 해석할 때 입력값과 고정된 움직임을 나누어 보세요. 이름, 시간, 속도 곡선, 방향, 종료 후 상태는 입력으로 조정할 수 있습니다. 반면 키프레임 안의 두 단계와 그 단계에 포함된 불투명도 및 세로 이동 값은 이 결과에서 정해진 내용입니다. 따라서 입력을 바꾸어도 새로운 중간 단계가 자동으로 생긴다고 보기는 어렵습니다.

요소에 연결하는 선언이 결과에 포함되는지도 살펴봅니다. 키프레임 정의만 있고 적용 선언이 빠졌다고 추측하기보다, 생성된 CSS 텍스트 안에서 두 부분을 각각 찾는 방식이 안전합니다. 이름을 직접 입력했다면 두 부분에서 같은 이름이 사용되는지 대조합니다. 시간을 입력했다면 선언에서 해당 값 뒤에 s가 붙었는지도 확인합니다.

이 도구의 결과는 고정된 등장 움직임을 바탕으로 한 CSS 텍스트입니다. 임의의 CSS 속성을 추가하거나 원하는 중간 키프레임을 설계하는 용도로 확장해서 해석하지 않는 것이 좋습니다. 다른 효과가 필요하다면 결과에 포함된 두 단계가 목표와 맞는지 먼저 판단하고, 맞지 않는 부분은 별도의 CSS 작성 범위로 구분합니다.

적용 전에는 선택한 요소와 애니메이션 선언의 관계를 점검합니다. 이름이 달라지면 키프레임과 요소 선언이 연결되지 않을 수 있으므로 입력 이름과 결과 이름을 함께 읽습니다. 기본값을 사용했다면 fadeIn, 1, ease, normal, none이 각각 어떤 위치에 반영되었는지 확인하면 결과를 이해하기 쉽습니다.

사용 예시

카드가 아래에서 위로 올라오며 나타나는 2초짜리 CSS 초안을 준비하려는 상황입니다.

카드 효과를 준비하면서 이름에 slideIn을 입력하고 재생 시간에 2를 넣은 다음 나머지 항목은 생략한 상태로 CSS 생성을 실행합니다.

이름이 slideIn이고 시간이 2s로 반영된 애니메이션 선언과, 0%에서 불투명도 0 및 세로 이동 20px, 100%에서 불투명도 1 및 세로 이동 0을 담은 키프레임 CSS가 나타납니다.

제한 사항

• 키프레임의 내용은 불투명도와 세로 이동을 사용하는 두 단계로 정해져 있습니다. 임의의 CSS 속성이나 사용자 지정 중간 단계를 자동으로 추가하는 기능으로 해석할 수 없습니다.

자주 발생하는 오류

• 이름 입력란을 빈 상태로 두고 원하는 이름이 유지될 것으로 생각하면 결과의 이름이 예상과 달라질 수 있습니다. 빈 값은 myAnimation으로 바뀌므로, 특정 이름이 필요할 때는 그 이름을 직접 입력한 뒤 생성된 키프레임과 적용 선언을 확인하세요.

자주 묻는 질문

애니메이션 이름을 입력하지 않으면 어떤 이름이 사용되나요?

이름 입력을 생략하면 fadeIn이 사용됩니다. 입력란에 빈 값을 넣은 경우에는 생성 전에 myAnimation으로 대체됩니다.

재생 시간은 어떤 단위로 결과에 들어가나요?

재생 시간은 입력한 값 뒤에 초 단위가 붙는 방식으로 선언에 반영됩니다. 2를 입력하면 결과에는 2s가 들어갑니다.

생성되는 기본 움직임은 어떻게 구성되나요?

키프레임은 시작과 끝의 두 단계로 생성됩니다. 시작에는 불투명도 0과 세로 이동 20px이, 끝에는 불투명도 1과 세로 이동 0이 사용됩니다.