skills.rest
taxmaxi
taxmaxiOFFICIAL
Explore all skills by this author →
Website𝕏@TaxMaxiHQGitHub

css-animations

Write CSS transitions, keyframes, transforms, and clip-path animations without JavaScript libraries.

1|1|Updated May 11, 2026
Search Tags:#frontend#css#animation#transitions#keyframes#transforms#clip-path
One-click install
npx skills add https://github.com/taxmaxi/taxmaxi --skill css-animations-taxmaxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: css-animations
Source: https://github.com/taxmaxi/taxmaxi/tree/main/.codex/skills/css-animations
Command: npx skills add https://github.com/taxmaxi/taxmaxi --skill css-animations-taxmaxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing between a transition and a keyframe animation, picking the right easing curve, and debugging flickering hover states or broken 3D transforms are recurring pain points when writing CSS motion by hand. ## Core Features & Use Cases - Transition vs keyframe decision rules: Clear criteria based on interruptibility, looping, and whether the user or the page drives the motion. - Worked recipes: Hover reveals, toast stacks, staggered text reveals, 3D orbits and coin flips, and clip-path effects like comparison sliders and hold-to-delete. - Easing and timing blueprint: Named cubic-bezier curves (ease-out-expo, ease-vaul) paired with duration guidance, plus touch-safe hover gating with @media (hover: hover). - Use Case: A developer building a toast notification stack can apply the interruptible enter pattern using transitions and CSS custom properties instead of pulling in a motion library. ## Quick Start Ask the AI to write a CSS-only hover reveal animation for a card component using the css-animations skill.

Frequently Asked Questions about css-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between a CSS transition and a keyframe animation?▼

Use a transition when user interaction triggers the change or it can be interrupted mid-flight, since transitions interpolate from the current value. Use @keyframes for automatic, looping, or multi-step animations like marquees and spinners.

How do I animate an element entering the page with CSS only?▼

Use a keyframe animation with animation-fill-mode: backwards so the first frame applies before a delay, or use @starting-style with a transition for a state-free enter animation. Both avoid JavaScript mount-state tricks.

When should I use a motion library instead of CSS animations?▼

Use a library like Motion when the animation is complex, needs real spring physics, or must feel natural when interrupted. CSS has no springs, so iOS-level polish is not reachable with plain CSS, though CSS wins on hardware acceleration.

Why does my hover effect flicker or fire on mobile?▼

Flicker happens when the hovered element moves out from under the cursor; animate a child instead so the hover target stays still. On touch devices, tapping triggers hover, so gate effects with @media (hover: hover) and (pointer: fine).

Why is my CSS 3D transform not showing depth?▼

translateZ has no visible effect without perspective on the parent, and children cannot pass behind siblings without transform-style: preserve-3d. Add both properties to the parent container to enable real 3D space.

How do I animate a reveal without layout shift in CSS?▼

Animate clip-path with inset() instead of width or height. The content is already laid out and merely clipped, so there is no layout shift, and clip-path is hardware-accelerated like transform.

Related Skills

Explore More Software Engineering Skills→
willmusubiwillmusubi
1

mufy-style-generator

Generate pure CSS styles for MUFY character cards from natural language prompts.

Community
Intermediate
xenoISAxenoISA

remotion-best-practices

Provide best practices and usage instructions for Remotion video compositions with React.

Official
Intermediate
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
markus41markus41
18

Spring Physics Skill

Generate physics-based spring animations for user interfaces with Framer Motion and React Spring.

Community
Intermediate