고급 모드에서 애니메이션 수정

타임라인에서 애니메이션을 생성하고 나면, 애니메이션 요소를 수정하거나 키프레임 및 범위를 변경하거나 애니메이션을 반복하여 애니메이션을 조정할 수 있습니다.

Timeline enhancements

애니메이션 요소 수정

애니메이션 요소의 속성을 변경하면 기존 키프레임이 없는 경우 플레이헤드 위치에 키프레임이 자동으로 추가됩니다. 기존 키프레임을 선택하여 타임라인에서 해당하는 특정 지점의 요소를 수정할 수도 있습니다. 모든 이전 또는 후속 애니메이션은 변경된 속성으로 시작 또는 종료되도록 조정됩니다.

첫 번째 키프레임에서 속성을 변경하면 요소의 기본 속성이 수정됩니다. 이후의 키프레임에서는 다른 속성 값이 지정되지 않는 한 기본 속성을 상속합니다.

여러 개의 키프레임을 선택하고 요소의 속성을 수정하면 변경사항이 선택한 모든 키프레임에 적용됩니다.

애니메이션 이징 변경

애니메이션의 이징을 변경하려면 변경할 범위를 마우스 오른쪽 버튼으로 클릭하고 새 이징 또는 이징 옵션...을 선택하여 맞춤 이징을 지정합니다.

애니메이션 반복

타임라인에서 키프레임 및 범위 조정하기

키프레임 및 범위 선택하기

키프레임과 범위를 선택하는 방법에는 여러 가지가 있습니다.

• 키프레임 또는 범위를 클릭하여 선택합니다. 연속된 두 개의 키프레임을 선택하면 그 사이의 범위도 선택됩니다. 마찬가지로 범위를 선택하면 범위에 포함된 키프레임도 자동으로 선택됩니다.
• 인접한 여러 키프레임 또는 범위를 선택하려면 Shift 키를 누른 상태에서 클릭합니다.
• 떨어져 있는 키프레임 또는 범위를 선택하거나 선택 해제하려면 Ctrl 키(Windows) 또는 ⌘ 키(Mac)를 누른 상태에서 클릭합니다.
• 직사각형의 선택 마키를 클릭한 상태로 드래그하여 직사각형 내의 모든 키프레임을 선택합니다. 두 키프레임이 모두 마키 내에 포함되어 있는 경우에만 범위가 선택됩니다.
• Control 키(Windows) 또는 ⌘ 키(Mac)를 누르고 마키를 클릭한 상태로 드래그하여 키프레임을 선택하거나 선택 해제합니다. 현재 선택되어 있지 않은 직사각형 내의 키프레임은 선택되고, 이미 선택되어 있던 키프레임은 선택 해제됩니다. 이때도 범위는 두 키프레임이 모두 마키 내에 포함되어 있는 경우에만 영향을 받습니다.
  
• 타임라인 내에서 레이어를 더블클릭하여 해당 레이어의 모든 키프레임, 범위 및 공개 범위 핸들을 선택합니다.

키프레임 및 범위 이동

키프레임이나 범위를 선택한 후에는 타임라인을 따라 드래그하여 새 위치로 이동할 수 있습니다. 애니메이션 타이밍은 이동한 위치에 맞게 조정됩니다.

애니메이션 조정하기

키프레임 간격 비율을 유지하면서 애니메이션을 길게 또는 짧게 조정할 수 있습니다. 애니메이션을 조정하려면 다음 단계를 따르세요.

1. 조정하려는 키프레임이나 범위를 선택합니다. 서로 다른 레이어에 있어도 가능합니다.
2. Shift 키를 누른 상태에서 선택한 키프레임 중 하나를 왼쪽이나 오른쪽으로 드래그합니다. 애니메이션의 중간 지점을 기준으로 먼 쪽이나 가까운 쪽으로 드래그하는지에 따라 애니메이션 길이가 늘어나거나 줄어듭니다. 이때 선택된 다른 키프레임도 간격 비율을 유지하며 이동합니다. 가장 먼 끝에 있는 키프레임은 제외되며 그대로 유지됩니다.
   • 타임라인 맞추기를 사용 설정한 경우 드래그하는 키프레임에만 맞추기가 적용됩니다.
   • 키프레임은 서로 겹칠 수 없으며 다른 키프레임으로부터 0.1밀리초 이상 떨어져야 합니다.
   • 선택되지 않은 키프레임은 이동하지 않지만 선택된 키프레임의 이동을 제한할 수 있습니다.

타임라인 키프레임 조정

키프레임 복사 및 붙여넣기

키프레임을 복사하여 동일한 레이어의 다른 시간, 다른 레이어 또는 다른 페이지나 문서의 타임라인에도 붙여넣을 수 있습니다. 붙여넣은 키프레임의 애니메이션 속성은 유지되지만 애니메이션 이징 또는 모션 경로는 유지되지 않습니다.

다음 방법을 사용해 키프레임을 복사하여 붙여넣을 수 있습니다.

• 복사할 키프레임을 선택하고 Control + C 키(Windows) 또는 ⌘ + C 키(Mac)를 누른 다음, 타임라인에서 새 위치를 클릭하고 대상 레이어를 하나 이상 선택합니다. Control + V 키(Windows) 또는 Command + V 키(Mac)를 눌러 붙여넣습니다.

• 복사할 키프레임을 마우스 오른쪽 버튼으로 클릭합니다. 팝업 메뉴에서 키프레임 복사를 선택한 다음 대상 레이어의 새 타임라인 위치를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 키프레임 붙여넣기를 선택합니다.

• Alt 키(Windows) 또는 Option 키(Mac)를 누른 상태에서 키프레임을 클릭하여 드래그하거나, 키프레임을 클릭한 후 Alt 키를 누른 상태에서 드래그(Linux)하여 종료 위치에 키프레임을 복제합니다. 이 방법은 중첩 애니메이션의 페이지, 문서, 타임라인 간에는 작동하지 않습니다.

키프레임 삭제하기

키프레임을 삭제하려면 키프레임을 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 상태에서 클릭(Mac)하고 팝업 메뉴에서 삭제를 선택합니다.

CSS 패널에서 키프레임 규칙 수정하기

CSS 키프레임 규칙(@keyframes 키워드로 시작)을 잘 알고 있는 경우 디자인 보기에 있는 동안 CSS 패널에서 애니메이션 스타일을 보고 수정할 수 있습니다. 패널에서 변경한 사항은 타임라인 및 스테이지에 자동으로 반영됩니다.

키프레임 규칙으로 작업하기

• CSS 패널의 해당 요소에 대한 키프레임 규칙을 보려면 단일 애니메이션 요소를 선택합니다.
• 키프레임 삽입을 클릭하여 기존 키프레임 사이에 키프레임을 추가합니다.
• 키프레임 비율을 수정합니다.
• 키프레임의 애니메이션 속성을 추가, 수정 및 삭제합니다.
• 속성 이름 옆의 체크박스를 클릭하여 전체 애니메이션에서 애니메이션 속성을 사용 설정하거나 사용 중지합니다.
• 백분율을 지우거나 해당 키프레임의 모든 애니메이션 속성을 삭제하여 개별 키프레임을 삭제합니다.
• 키프레임 규칙을 선택하고 패널 하단에서 선택한 규칙 삭제  버튼을 클릭하여 요소의 모든 CSS 애니메이션을 삭제합니다.

CSS 패널에서 키프레임 규칙 수정하기

제한사항

• 이징은 수정할 수 없습니다.
• 마지막 키프레임 이후에는 키프레임을 추가할 수 없습니다. 대신 타임라인을 사용하세요.

CSS 패널 사용에 대해 자세히 알아보기