Toolipedia- Free
- No sign-up
- Works on any device
No tool matches your search.
- Free
- No sign-up
- Works on any device
Create a QR code for a link, Wi-Fi, WhatsApp, contact and more, or read one from a photo.
- Free
- No sign-up
- Works on any device
Fill in the details to see your QR code.
PNG for phones, chats and websites. SVG and PDF stay sharp at any size, which is best for printing. Tip: point your phone camera at the preview to test it.
3. Style (optional): colors, dots, logo
Choose a photo or screenshot or drag it here
Works with photos of printed codes, screenshots and image files.
Looking for QR codes…
CSS animation generator
Bounce, fade, shake, slide and more as @keyframes, ready to copy.
- Free
- No sign-up
- Works on any device
About CSS animation generator
Choose a ready-made effect such as bounce, fade, shake, pulse or slide, adjust duration and delay, and copy the @keyframes rule with the animation property. Stick to transform and opacity where possible, because browsers animate those smoothly without recalculating the page layout.
How to use CSS animation generator
- Choose an effect such as bounce, fade, shake or slide.
- Set duration and delay, then watch the preview.
- Copy the keyframes and the animation property into your CSS.
Why use this tool?
- Private: everything happens in your browser. Nothing you enter is uploaded.
- Free, with no sign-up, no watermark and no limit on how often you use it.
- Works on phones, tablets and computers: Android, iPhone, Windows, Mac and Linux. Nothing to install.
- Free to embed on your own website, with a ready-made code to copy.
- Available in 10 languages.
Also known as
Frequently asked questions
How do I make a CSS animation loop forever?
Set animation-iteration-count to infinite, or use infinite in the animation shorthand. Add a timing function such as ease-in-out so the loop feels natural.
How do I run the animation only once?
Set the iteration count to 1 instead of infinite. Add fill-mode forwards if you want the element to stay in its final state afterwards.
How do I use the animation on my element?
Paste the keyframes into your stylesheet, then add the animation property to the class of the element you want to move.
Is CSS animation generator free?
Yes. CSS animation generator on Toolipedia is free to use, with no sign-up and no watermark.
Is it safe to use?
Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.
Does it work on my phone?
Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.
Do I need an account?
No. Just open the page and use the tool. There's no sign-up and no email needed.
Can I put CSS animation generator on my own website?
Yes. Use the Embed on your site button under the tool to copy a short piece of code and paste it into your page. It is free, needs no account, and the tool keeps working inside your page.