The CSS and JS animation library includes a range of useful animation effects, including fade in and fade out, slide in, zoom, rotate, bounce, shake, pulse, rainbow background, typewriter effect, rotating text and neon text. Here is a brief description of each effect and how to use them

Fade In

Instructions: Add the .fade-in class to the element and define the fadeIn animation. The animation will complete the fade-in effect in 2 seconds.

Fade Out

Instructions: Add the .fade-out class to the element and define the fadeOut animation. The animation will complete the fade-out effect in 2 seconds.

Slide In Left

Instructions: Add the .slide-in-left class to the element and define the slideInLeft animation. The animation will complete the slide-in effect from the left in 1 second.

Slide In Right

Instructions: Add the .slide-in-right class to the element and define the slideInRight animation. The animation will complete the slide-in effect from the right in 1 second.

Zoom In

Instructions: Add the .zoom-in class to the element and define the zoomIn animation. The animation will complete the zoom in effect in 1 second.

Zoom Out

Instructions: Add the .zoom-out class to the element and define the zoomOut animation. The animation will complete the zoom out effect in 1 second.

Rotate

Instructions: Add the .rotate class to the element and define the rotate animation. The animation will rotate infinitely at a linear speed, and each rotation will last for 2 seconds.

Bounce

Instructions: Add the .bounce class to the element and define the bounce animation. The animation will bounce infinitely, and each bounce will last for 2 seconds.

Shake

Instructions: Add the .shake class to the element and define the shake animation. The animation will vibrate with the specified easing function, and the duration is 0.82 seconds.

Pulse

Instructions: Add the .pulse class to the element and define the pulse animation. The animation will have an infinite pulse effect, each pulse lasting 1 second.

Rainbow Background

Instructions: Add the .rainbow class to the element and define the rainbow animation. The animation will change the background color between rainbow colors, each change lasting 5 seconds, and looping infinitely.

Typewriter Effect

Instructions: Add the .typewriter class to the container containing the text, and define the typewriter and blinkTextCursor animations. This effect simulates the process of typing text on a typewriter, and the cursor flashes after the input is completed.

Rotating Words

Instructions: Put the text to be rotated in the div tag inside the .rotating-words container. Each div contains a text to be displayed. Use the CSS animation rotateWords and the appropriate animation-delay to realize the rotation and display of the text in sequence.

Neon Text

Instructions: Add the .neon class to the element and use the text-shadow property to create a neon effect. This effect is achieved by superimposing multiple shadows, making it look like the text is glowing.

Note

Most animations require predefined @keyframes animations.

You can adjust the duration, easing function, and delay time of the animation as needed.

Neon text effects do not rely on JavaScript and are implemented only with CSS.

Rotating text and typewriter effects may require additional HTML structure to support.