During the development of a project, designers will inevitably create animated effects to enhance the user experience. If the current effect does not require interaction and is only for display, we can use GIF or APNG to achieve the effect. but if the current animation requires other interactions in addition to presentation, or even a component requires animation effects, it would be unreasonable to use a picture format. So I wrote an extremely simple css animation library rc-css-animate . Here we directly use animate.css as the dependent library for css animation. Animate.css not only provides many interactive animation style classes, but also provides animation running speed, latency, and the number of repetitions and other style classes. as you can see, the default animate.css build animation needs to carry the prefix "animate__". <h1 class="animate__animated animate__bounce">An animated element</h1> of course, the library encapsulates css animation and still supports other animation libraries as well as their own handwritten css animation, but this library is not recommended if developers need to control all kinds of complex animation. use can be used in the following ways: import React, { useRef } from "react"; import ReactCssAnimate from "rc-css-animate"; // introduce animate.css as an animation dependency import "animate.css"; function App() { const animateRef = useRef(null); return ( <div className="App"> <ReactCssAnimate // Define the components that currently display the animation // Use by default div tag="div" // Of the current component className className="" // Of the current component style style={{}} // Of the current component ref ref={animateRef} // Animation prefix clsPrefix="animate__" // Of the current animation className animateCls="animated…