Build a CSS @keyframes animation without hand-writing it. Set the timing controls, edit keyframe stops (transform and opacity per stop), preview the result live, then copy the finished CSS. Everything runs in this page and nothing leaves your browser.
Presets
Animation settings
Keyframe stops
Each stop sets translate X/Y (px), scale, rotate (deg), and opacity at that percentage of the timeline. Stops are sorted by percentage when the CSS is generated.