CSS animation effects library
Twenty entrance effects you can use as they are. Hover or click a card to preview it, then copy the CSS.
No effects match that search.
Quick answer: This library has 20 ready-made CSS animation effects: fade, slide, zoom, flip, rotate, blur and bounce. Hover or click a card to preview it, then press Copy CSS to get the @keyframes rule and a class you can add to any element.
How to use an effect
Copy the CSS into your stylesheet and add the generated class (for example fx-fade-up) to any element. The animation plays when the element is added to the page. To trigger it on scroll instead, use the scroll animation generator.
Pick the right effect
- Fade effects are the safest and most subtle.
- Slide effects suit panels, drawers and banners.
- Zoom and flip effects add emphasis to cards and images.
- Bounce effects are playful; use them for one or two key elements.
Frequently asked questions
Are these effects free to use?
Yes. Copy the CSS and use it in any project.
Do they respect reduced motion?
The preview and the scroll generator disable animation for visitors who ask for reduced motion. When you copy a single effect, add a prefers-reduced-motion rule like the one the scroll generator outputs.
Can I change the timing or distance?
Yes. Edit the duration and easing in the animation shorthand, and the pixel distances inside the @keyframes rule. The scroll animation generator lets you adjust them with sliders.
How do I add them to WordPress blocks?
Animate on Scroll by Developry applies effects like these to any block from the editor sidebar and loads only the effects each page uses.