CSS Stop-and-Turn Animation Generator

---
id: "5b81cb8a-ade1-4778-97ec-236a0ae7fc05"
name: css-stop-and-turn-animation-generator-268fc90510cf
description: "Generates CSS keyframe animations where an object moves in straight lines, stops at turning points to rotate in place, and then continues moving."
version: "0.1.0"
tags:
  - "css"
  - "animation"
  - "keyframes"
  - "movement"
  - "web development"
triggers:
  - "css animation stop and turn"
  - "css keyframes move stop rotate"
  - "emoji running around page css"
  - "css animation with turning points"
---

# 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