마우스를 가져가면 요소 표시

호버 상호 작용을 활용하여 호버링 시 요소를 표시합니다.

이 튜토리얼 내에서:

1. 호버 항목에 대한 애니메이션 만들기
2. 마우스 오버 종료에 대한 애니메이션 만들기 
3. 다른 구성요소에 애니메이션 구현

호버 항목에 대한 애니메이션 설정

1. 링크 블록을 선택하세요(트리거 역할을 하기 위해)
2. 상호 작용 패널에서 요소 트리거 옆에 있는 추가 기호를 클릭하고 선택 항목에서 마우스 호버를 선택합니다.
3. On Hover 이벤트의 경우 작업 목록에서 애니메이션 시작을 선택합니다.
4. 시간 애니메이션 근처의 추가 기호를 탭하세요.
5. 이름을 지정하세요(예: 슬라이드 인).
6. 애니메이션을 적용할 구성요소를 선택하세요(예: 하트 구성요소).
7. Timed Actions 근처의 추가 기호를 누르고 옵션에서 Shift를 선택하세요.
8. Shift의 경우 x축에 값을 할당합니다(예: -100).
9. 타이밍 옆에서 초기 상태로 설정 토글을 켭니다.
10. 다른 요소에 애니메이션을 적용하려면 6~9단계를 반복하세요. 
11. 상호 작용 패널(Shift 키를 누름)을 누르고 순서대로 구성 요소를 선택합니다.
12. 복제하려면 마우스 오른쪽 버튼을 클릭하세요.
13. Shift의 경우 x축을 원래 값(0픽셀)으로 되돌립니다.
14. 타이밍의 경우 Easing을 변경합니다(예: Ease Out).
15. 지속 시간을 줄입니다(예: 0.2초).

마우스 오버 종료에 대한 애니메이션 만들기 

1. 방금 만든 애니메이션을 종료합니다. 
2. 마우스 오버 시 상호 작용 패널의 작업 목록에서 애니메이션 시작을 선택합니다.
3. 시간 제한 애니메이션에서 슬라이드 인 옆에 있는 기어 아이콘을 탭하고 복제를 선택합니다.
4. 슬라이드 인 2 활성화
5. 이름을 바꿉니다(예: 우아하게 슬라이드 아웃).
6. 시퀀스에서 복제된 애니메이션(예: Heart 및 H3 Price)을 삭제합니다. 
7. 타임라인에서 나머지 애니메이션을 선택하세요.
8. 타이밍 옆에서 초기 상태로 설정을 끕니다.
9. 이전에 수행한 것처럼 이징 및 기간을 조정합니다.

다른 구성요소에 애니메이션 구현

1. 순서에 따라 시간 제한 작업을 선택하세요. 
2. Impact 옆에서 Class를 선택하세요.
3. 이 클래스의 모든 요소를 클릭하고 이 클래스의 하위만 선택합니다.
4. 호버 진입 및 호버 종료 모두에 대해 1-3을 반복합니다.

‍