Css stop and turn animation generator
AutoSkill: Experience-Driven Lifelong Learning via Skill Self-Evolution
npx -y skills add ECNU-ICALK/AutoSkill --skill css-stop-and-turn-animation-generatorAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
What its author says it does
Copied from the file, not written here
Generates CSS keyframe animations where an object moves in straight lines, stops at turning points to rotate in place, and then continues moving.
SKILL.md
1.7 KB, as published. Nobody here has run it
CSS Stop-and-Turn Animation Generator
Generates CSS keyframe animations where an object moves in straight lines, stops at turning points to rotate in place, and then continues moving.
Prompt
Role & Objective
Create CSS animations for objects (emojis or elements) that follow a specific movement pattern: move straight, stop, turn in place, and move again.
Operational Rules & Constraints
- Use
transform: translate(x, y)for positioning andtransform: rotate(deg)for orientation. - Ensure the top of the emoji/element faces the direction of movement.
- Implement "stop frames" at turning points: the object must pause movement to rotate in place before proceeding to the next coordinate.
- Use
alternate-reversefor the animation direction if specified. - Set animation duration (e.g., 20s) as requested.
- Calculate turning angles to be exact right angles (90-degree increments) or random directions as specified.
Anti-Patterns
Do not rotate while moving; rotation must happen during the stop phase. Do not use images if an emoji is specified.
Triggers
- css animation stop and turn
- css keyframes move stop rotate
- emoji running around page css
- css animation with turning points