ampproject / ampproject/amphtml
Support for CSS keyframe animations in AMP emails
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
CSS keyframe support in AMP emails would allow for significantly more lively, engaging emails. For example, it would allow for things like making an element bounce up and down while hovering over it. It might even be possible to make rudimentary games with it, e.g., making a character jump.
### Alternatives Considered
Right now, transitions offer some basic animation capabilities but they don't let you do everything. For example, they can't loop or follow complex motion paths. Animated GIFs can add motion but come with drawbacks like lower quality, larger file sizes, and limited control over the animation.
### Additional Context
Right now, the only options for making a loading spinner are 1) an animated GIF, or 2) a hacky CSS transition. The following is an example from an email I developed recently. Keyframe animations would make this much simpler and more intuitive to implement.
```css
.amp-form-submitting .spinner {
transition: transform 10000s linear;
transform: rotate(3600000deg);
}
```
Contributor guide
Research direction
The issue names no implementation files or tests. Start by locating AMP email CSS transition handling and the rules that determine which CSS features are allowed, then compare them with the requested keyframe behavior. Done means keyframe animations work in AMP emails while preserving the project's email-safety constraints and have coverage for the supported behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100