A port of Animate.css for adding CSS3 animations to Vue.js 2/3 and Alpine.js transitions.
vue-animate is a library that ports Animate.css animations for use with Vue.js 2.0, 3.0, and Alpine.js. It enables developers to easily add cross-browser CSS3 animations to Vue transitions and Alpine.js components without writing custom animation CSS. The project solves the problem of integrating pre-built, polished animations into modern JavaScript frameworks with minimal configuration.
Frontend developers using Vue.js or Alpine.js who want to add ready-made, performant animations to their applications without manually managing CSS keyframes or animation timing.
Developers choose vue-animate because it provides a seamless bridge between the extensive Animate.css animation library and Vue/Alpine transition systems, offering a lightweight, framework-native way to implement animations with support for customization and interactive triggers.
A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Works seamlessly with Vue 2.x and 3.x <Transition> and <TransitionGroup> components, allowing direct use of Animate.css class names by removing prefixes, as demonstrated in the README examples.
Compatible with Alpine.js x-transition directives, enabling lightweight animations in markup without full Vue setup, per the 'Work with Alpine.js' section.
Provides JavaScript functions like bounce() and headShake() for triggering one-time animations on DOM elements, useful for form validation and user interactions, with examples in the Attentions Seekers section.
Supports CSS custom properties (e.g., --animate-duration) for global or per-element control, and allows overriding animation properties via inline styles, as shown in the Custom Animation Properties part.
Relies entirely on Animate.css animations; creating custom keyframe animations requires additional CSS work outside the library, which the README does not address.
Primarily designed for Vue.js and Alpine.js, making it less useful for projects using other frameworks or vanilla JavaScript, with no built-in support for React or similar ecosystems.
Using features like custom transition classes or attention seekers requires understanding both Vue transition hooks and CSS animation properties, which can be steep for developers new to animations.