ampproject / ampproject/amphtml

Support for CSS keyframe animations in AMP emails

Open
#40,255 1 comment 8 reactions 0 assignees View on GitHub
Type: Feature Request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.