·css-animation-patterns

css-animation-patterns

Name: css-animation-patterns
Author: oakoss

✓

oakoss/agent-skillsGitHub: oakoss/agent-skills 출처: oakoss/agent-skills

CSS 애니메이션, 전환, 키프레임 및 최신 모션 API. 애니메이션, 전환, 스크롤 기반 효과 또는 보기 전환을 추가할 때 사용합니다. CSS 애니메이션, 전환, 키프레임, 보기 전환, 스크롤 애니메이션, 변환, 모션 기본 설정, 애니메이션 타임라인에 사용합니다.

oakoss·css·animation·patterns

20설치·2트렌드·@oakoss

설치

GitHub: oakoss/agent-skills

$npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns

css-animation-patterns 설치 방법

명령줄에서 css-animation-patterns AI 스킬을 개발 환경에 빠르게 설치

터미널 열기: 터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다
설치 명령어 실행: 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns
설치 확인: 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다

출처: oakoss/agent-skills.

SKILL.md

원본 보기

CSS animations and transitions provide hardware-accelerated motion for web interfaces using keyframes, transitions, transforms, and modern scroll-driven and view transition APIs. Animate only composite properties (transform, opacity, filter) for smooth 60fps performance, and always respect prefers-reduced-motion.

The browser rendering pipeline has four stages: Style, Layout, Paint, and Composite. Animating composite-only properties skips Layout and Paint entirely, running on the GPU compositor thread. This is the single most important performance principle for CSS animation.

Modern CSS adds two powerful APIs: scroll-driven animations link keyframe progress to scroll position or element visibility instead of time, and the View Transitions API creates snapshot-based animated transitions between DOM states for both SPAs and MPAs.

CSS 애니메이션, 전환, 키프레임 및 최신 모션 API. 애니메이션, 전환, 스크롤 기반 효과 또는 보기 전환을 추가할 때 사용합니다. CSS 애니메이션, 전환, 키프레임, 보기 전환, 스크롤 애니메이션, 변환, 모션 기본 설정, 애니메이션 타임라인에 사용합니다. 출처: oakoss/agent-skills.

인용 가능한 정보

AI/검색 인용용 안정적인 필드와 명령어.

설치 명령어: npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns
출처: oakoss/agent-skills
카테고리: *크리에이티브
인증됨: ✓
최초 등록: 2026-02-25
업데이트: 2026-03-10
URL: https://www.learn-skills.dev/ko/skills/oakoss/agent-skills/css-animation-patterns

Browse more skills from oakoss/agent-skills

빠른 답변

css-animation-patterns이란?

css-animation-patterns 설치 방법은?

터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/oakoss/agent-skills --skill css-animation-patterns 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다

소스 저장소는 어디인가요?

https://github.com/oakoss/agent-skills

상세

카테고리: *크리에이티브
출처: skills.sh
최초 등록: 2026-02-25