Skip to content
PocketPlayCSS & design
中文

Tools

Tools164 free tools that run in your browser.PDF toolsMerge, split, compress and convert PDFs.Image toolsCompress, convert, resize and make ID photos.Audio & videoTrim, convert and record audio and video.Text toolsCount, clean, compare and convert text.Developer toolsJSON, encoding, network and security utilities.CSS & designGradients, shadows, colours and layout CSS.CalculatorsEveryday numbers, dates and conversions.

Games

GamesBoard and card games, ready in one click.Board gamesChess, Go, Xiangqi and 14 more. Play a friend online.Card gamesSolitaire, Hearts, Spades and 40+ classics.

Create & choose

CreatorsReview your Douyin and Instagram posts and plan the next one.VPS pickerDescribe your project. Get a VPS shortlist.

More

TarotA card reading as a prompt for reflection.Skill RankDiscover and compare AI agent skills.CiteProofCheck a bibliography against real records.

Read & talk

BlogPractical guides with sources.CommunityReviews, recommendations and red flags.
Sign in

Tools

Tools164 free tools that run in your browser.PDF toolsMerge, split, compress and convert PDFs.Image toolsCompress, convert, resize and make ID photos.Audio & videoTrim, convert and record audio and video.Text toolsCount, clean, compare and convert text.Developer toolsJSON, encoding, network and security utilities.CSS & designGradients, shadows, colours and layout CSS.CalculatorsEveryday numbers, dates and conversions.

Games

GamesBoard and card games, ready in one click.Board gamesChess, Go, Xiangqi and 14 more. Play a friend online.Card gamesSolitaire, Hearts, Spades and 40+ classics.

Create & choose

CreatorsReview your Douyin and Instagram posts and plan the next one.VPS pickerDescribe your project. Get a VPS shortlist.

More

TarotA card reading as a prompt for reflection.Skill RankDiscover and compare AI agent skills.CiteProofCheck a bibliography against real records.

Read & talk

BlogPractical guides with sources.CommunityReviews, recommendations and red flags.
Account中文

CSS Animation Generator

Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.

FreeRuns in your browserNo sign-up

Preview

Hello

Keyframes

Effects

Timing

Easing

CSS










Related tools
CSS & design
CSS Gradient GeneratorCSS Filter GeneratorBox Shadow GeneratorBorder Radius GeneratorColor PickerColor Converter
How to use the CSS animation generator
  1. Start from an effect preset, or click Add keyframe and place it at any percentage along the timeline.
  2. Select a keyframe and set its move, scale, rotate, skew, opacity and background; adjust duration, delay, repeat and easing on the right.
  3. Copy the generated @keyframes block plus the class and paste it straight into your stylesheet.
FAQ
How do I make a custom easing curve?
Choose Custom cubic-bezier and drag the two handles on the curve. The tool writes the exact cubic-bezier(x1, y1, x2, y2) values, including overshoot curves where a handle goes above 1.
Why does my animation not run on the page?
Check that the element has the generated class, that it is not display: none, and that animation-fill-mode is set — with both the element keeps the first keyframe before the delay and the last one after it finishes.
Can I animate colours and transforms together?
Yes. Tick Animate background colour and each keyframe will also carry a background-color, which the browser interpolates alongside the transform.
Guides and tipsPractical how-tos from the PocketPlay Tools blog.
Something missing or broken?
Request a tool, report a bug or share a tip with other users.
Request a toolOpen community
Privacy · Terms