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