애니메이션이 재생되지 않을 때 – ZenBlocks buttonBasic
결론
애니메이션 미동작의 주요 원인은 **필수 요소 미설정, 애니메이션 종류 오인, 에디터에서만 확인**입니다.
—
원인
| 애니메이션 종류 | 발동 시점 | 전제 조건 |
|—|—|—|
| 텍스트 애니메이션 | 호버 시 | 텍스트 입력 |
| 아이콘 애니메이션 | 호버 시 | 아이콘 설정 |
| 프레임 애니메이션 | 상시 재생 | 아이콘 프레임 설정 |
| 버튼 애니메이션 | 호버 시 | 없음 |—
해결 절차
### 1단계: 애니메이션 종류 확인
1. 설정한 애니메이션이 텍스트/아이콘/프레임/버튼 중 무엇인지 확인합니다.
2. 해당 설정 패널을 엽니다.
3. 프리셋이 `none`이 아닌지 확인합니다.### 2단계: 전제 요소 확인
– **텍스트 애니메이션**: 메인 텍스트 입력 여부 확인
– **아이콘 애니메이션**: 아이콘 선택 여부 확인
– **프레임 애니메이션**: 아이콘 프레임 활성화 여부 확인
– **버튼 애니메이션**: 별도 전제 조건 없음### 3단계: 프런트엔드에서 확인
1. 에디터 미리보기 대신 실제 프런트엔드 페이지를 엽니다.
2. 호버형 애니메이션(텍스트/아이콘/버튼)을 마우스오버로 확인합니다.
3. 상시형 애니메이션(프레임)은 로딩 직후 재생 여부를 확인합니다.### 4단계: 트랜지션 값 확인
1. 트랜지션 패널을 엽니다.
2. `Duration`이 너무 짧지 않은지 확인합니다.
3. `Delay`가 과도하게 길지 않은지 확인합니다.—
주의사항
– 텍스트 애니메이션은 30자까지 글자 단위 지연이 적용됩니다.
– `neon-01`, `glow-01`은 `box-shadow`로 인해 효과가 버튼 영역 밖으로 보일 수 있습니다.
– 아이콘 애니메이션 활성화 시 아이콘 표시 제어는 애니메이션 모듈이 우선합니다.—
관련 설정
– [텍스트 애니메이션 설정](../text-animation/)
– [Icon 애니메이션 설정](../icon-animation/)
– [Frame 애니메이션 설정](../frame-animation/)
– [버튼 애니메이션 설정](../button-animation/)
– [아이콘 설정](../icon/)