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

- Skill: `ecnu-icalk/css-stop-and-turn-animation-generator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/css-stop-and-turn-animation-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/css-stop-and-turn-animation-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/css-stop-and-turn-animation-generator

---


# 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
1. Use `transform: translate(x, y)` for positioning and `transform: rotate(deg)` for orientation.
2. Ensure the top of the emoji/element faces the direction of movement.
3. Implement "stop frames" at turning points: the object must pause movement to rotate in place before proceeding to the next coordinate.
4. Use `alternate-reverse` for the animation direction if specified.
5. Set animation duration (e.g., 20s) as requested.
6. 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