현지화된 읽기 가이드
web-animation-design목적, 사용법 및 출처
자연스럽고 목적에 맞는 웹 애니메이션을 디자인하고 구현하세요. 사용자가 애니메이션, 모션, 이징, 타이밍, 지속 시간, 스프링, 전환 또는 애니메이션 성능에 대해 질문할 때마다 이 기술을 적극적으로 활용하세요. 여기에는 특정 UI 요소를 애니메이션하는 방법, 어떤 이징을 사용해야 하는지, 애니메이션 모범 사례 또는 모션에 대한 접근성 고려 사항과 같은 질문이 포함됩니다. 다음 항목에 대한 트리거를 사용하세요: 이징, 이즈아웃, 이즈인, 이즈인아웃, 큐빅 베지어, 바운스, 스프링 물리, 키프레임, 트랜스폼, 불투명도, 페이드, 슬라이드, 스케일, 호버 효과, 마이크로인터랙션, Framer Motion, React Spring, GSAP, CSS 전환entrance/exit애니메이션, 페이지 전환, 시차, 변경 예정, GPU 가속, 동작 최소화 선호modal/dropdown/tooltip/popover/drawer애니메이션, 제스처 애니메이션, 드래그 상호작용, 버튼 누르는 느낌이 어색합니다. 부드럽게 만들어 주세요.
출처 검색됨:
- 소스 저장소
- vercel-labs/open-agents
- SKILL.md
.agents/skills/web-animation-design/SKILL.md- 저장소 Star
- 5,871
- 저장소 최근 업데이트
- 2026-08-29
- 능력 분류
- 에이전트 워크플로
- 최근 수집 시간
라이선스: MIT
워크플로 발췌본은 이해를 돕기 위한 자료이며, Codez에서 제공하는 실행 가능한 명령어가 아닙니다. 이 페이지를 생성하는 데 타사 Skill은 사용되지 않았습니다.
아래의 목적 및 워크플로 관련 내용은 읽기 쉽도록 정리 및 번역된 상위 자료입니다. 이는 별도로 분류된 Codez 편집 분석과는 별개입니다.
이 스킬의 기능
자연스럽고 목적에 맞는 웹 애니메이션을 디자인하고 구현하세요. 사용자가 애니메이션, 모션, 이징, 타이밍, 지속 시간, 스프링, 전환 또는 애니메이션 성능에 대해 질문할 때마다 이 기술을 적극적으로 활용하세요. 여기에는 특정 UI 요소를 애니메이션하는 방법, 어떤 이징을 사용해야 하는지, 애니메이션 모범 사례 또는 모션에 대한 접근성 고려 사항과 같은 질문이 포함됩니다. 다음 항목에 대한 트리거를 사용하세요: 이징, 이즈아웃, 이즈인, 이즈인아웃, 큐빅 베지어, 바운스, 스프링 물리, 키프레임, 트랜스폼, 불투명도, 페이드, 슬라이드, 스케일, 호버 효과, 마이크로인터랙션, Framer Motion, React Spring, GSAP, CSS 전환entrance/exit애니메이션, 페이지 전환, 시차, 변경 예정, GPU 가속, 동작 최소화 선호modal/dropdown/tooltip/popover/drawer애니메이션, 제스처 애니메이션, 드래그 상호작용, 버튼 누르는 느낌이 어색합니다. 부드럽게 만들어 주세요.
업스트림 워크플로우 작동 방식
빠른 시작
모든 애니메이션 결정은 다음 질문에서 시작됩니다. 이 요소가 나타나는가, 사라지는가? → 사용ease-out화면상의 요소가 움직이고 있나요? → 사용ease-in-out이것은hover/color전환? → 사용ease
애니메이션을 언제 적용해야 할까요?
Enter/exit공간적 일관성을 위한 전환, 시각적 연속성이 중요한 상태 변화, 사용자 행동에 대한 반응(피드백), 즐거움이 가치를 더하는 드물게 사용되는 상호작용
상류 통로 · L144 ↗스프링은 언제 사용해야 할까요?
관성을 활용한 드래그 상호작용, "생동감"을 주는 요소(다이내믹 아일랜드), 애니메이션 도중 중단 가능한 제스처, 자연스럽고 재미있는 인터페이스
상류 통로 · L169 ↗Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms요구 사항 및 설정
이 파일에서 간략한 요구사항 구절이 선택되지 않았습니다. 이는 해당 스킬에 종속성이 없다는 의미는 아닙니다. 저장소 설정 지침 및 참조 파일을 확인하십시오.
제한 사항 및 품질 검사
안전한 시험 사용부터 시작하세요
- 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
- 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
- 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
- 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.
원문에서 더 자세한 내용을 읽어보세요.
관련 기술
번역 및 범위
이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.
이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.
- 고정된 소스
- 원문을 읽어보세요 ↗
- 출처 검색됨
- 소스 커밋
cf865e94de7729751c747171785b6ce57e7b178c- 출처 SHA-256
dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332