AutoSkill 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.

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/css-stop-and-turn-animation-generator" ~/.claude/skills/ecnu-icalk-autoskill-css-stop-and-turn-animation-generator && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt3.5_8_GLM4.7/css-stop-and-turn-animation-generator/SKILL.md

source content

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 and

transform: 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-reverse
```
for 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