awesome-repositories.com
المدونة
awesome-repositories.com

اكتشف أفضل مستودعات المصادر المفتوحة باستخدام بحث مدعوم بالذكاء الاصطناعي.

استكشفعمليات بحث منسقةبدائل مفتوحة المصدربرمجيات ذاتية الاستضافةالمدونةخريطة الموقع
المشروعحولكيفية ترتيب النتائجالصحافةخادم MCP
قانونيالخصوصيةالشروط
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
animate-css avatar

animate-css/animate.css

0
View on GitHub↗
animate.style↗

Animate.css

Animate.css is a library of pre-defined, cross-browser CSS keyframe animations that can be applied to elements through declarative class toggling. It functions as a comprehensive motion framework, providing a standardized set of effects that ensure consistent visual transitions without requiring custom keyframe definitions. The library is built with a focus on accessibility, automatically respecting system-level reduced motion preferences to ensure that animations are disabled or simplified for users sensitive to screen movement.

The framework distinguishes itself through a modular build process that allows developers to prune unused animation definitions, effectively minimizing the final payload size for production environments. Beyond static CSS, it provides programmatic control through JavaScript lifecycle management, enabling developers to sequence complex interactions by wrapping native animation events in promises. This combination of class-based state injection and event-driven hooks allows for precise orchestration of UI motion.

The project supports a utility-first approach to configuration, utilizing CSS custom properties and utility classes to manage animation timing, iteration counts, and delays. This architecture ensures that motion patterns remain consistent across an application while providing the flexibility to adjust parameters at runtime.

Features

  • CSS Animation Classes - Enables the application of standardized, cross-browser keyframe animations to any element by simply toggling specific CSS class names.
  • Motion Libraries - Ships a comprehensive collection of pre-built motion effects that integrate seamlessly into interface components via declarative class-based triggers.
  • Animation Lifecycle Hooks - Wraps animation completion events in promises, facilitating the orchestration of complex, asynchronous motion sequences and lifecycle flows.
  • Component-Based Animation Orchestrators - Coordinates complex interface transitions by providing a reliable, class-based mechanism to trigger and manage animation lifecycles within application components.

بحث بالذكاء الاصطناعي

استكشف المزيد من المستودعات الرائعة

صف ما تحتاجه بلغة بسيطة — وسيقوم الذكاء الاصطناعي بترتيب آلاف المشاريع مفتوحة المصدر المنسقة حسب الصلة.

Start searching with AI
82,609 نجوم·15,981 تفرعات·CSS·15 مشاهدات
Utility-First Motion Frameworks - Standardizes animation implementation through a utility-first approach, allowing developers to sequence motion by applying descriptive class names.
  • Awesome List - A community-curated directory that catalogs and links out to other open-source projects, rather than a standalone tool you run yourself.
  • Motion Accessibility Utilities - Prioritizes user comfort by automatically respecting system-level reduced motion preferences to ensure web interfaces remain accessible.
  • CSS Animation Utilities - Simplifies the addition of hardware-accelerated motion to web projects by offering a ready-to-use library of CSS keyframe animation utilities.
  • Animation and Tweening - Ready-to-use CSS animations.
  • Frontend Development - Library for cross-browser CSS animations.
  • Web Styling and UI - Cross-browser library for CSS animations.
  • Asset Bundlers - Reduces project overhead by enabling the selective packaging of only required animation assets during the build and bundling process.
  • State-Driven Animation Triggers - Initiates state-driven motion by toggling CSS classes, providing a declarative way to trigger animations based on user interaction or application state.
  • JavaScript Lifecycle Management - Facilitates programmatic control over animations by allowing developers to trigger effects, listen for completion events, and manage sequences via JavaScript.
  • Animation Timing Utilities - Allows precise adjustment of animation timing, including duration, delays, and iteration counts, through dedicated utility classes and CSS properties.
  • Animation Frameworks - Provides a robust infrastructure for managing and applying consistent, high-quality animation effects across diverse web application interfaces.
  • Motion Accessibility Controls - Automates the adaptation of motion design by detecting system-level accessibility settings and disabling effects when reduced motion is requested.
  • سجل النجوم

    مخطط تاريخ النجوم لـ animate-css/animate.cssمخطط تاريخ النجوم لـ animate-css/animate.css

    الأسئلة الشائعة

    ما هي وظيفة animate-css/animate.css؟

    Animate.css is a library of pre-defined, cross-browser CSS keyframe animations that can be applied to elements through declarative class toggling. It functions as a comprehensive motion framework, providing a standardized set of effects that ensure consistent visual transitions without requiring custom keyframe definitions. The library is built with a focus on accessibility, automatically respecting system-level reduced motion preferences to ensure that animations are…

    ما هي الميزات الرئيسية لـ animate-css/animate.css؟

    الميزات الرئيسية لـ animate-css/animate.css هي: CSS Animation Classes, Motion Libraries, Animation Lifecycle Hooks, Component-Based Animation Orchestrators, Utility-First Motion Frameworks, Awesome List, Motion Accessibility Utilities, CSS Animation Utilities.

    ما هي البدائل مفتوحة المصدر لـ animate-css/animate.css؟

    تشمل البدائل مفتوحة المصدر لـ animate-css/animate.css: minimac/magic — Magic is a CSS animation library and visual effects framework providing a collection of predefined motion styles for… rombohq/tailwindcss-motion — This project is a Tailwind CSS animation library and accessibility-aware motion framework. It provides a collection of… elrumordelaluz/csshake — csshake is a CSS animation library and framework designed to create shaking, vibrating, and oscillating movement… matthieua/wow — WOW is a JavaScript library and frontend animation controller that triggers CSS animations when elements enter the… nitin42/animate-components — Animate Components is a motion framework that provides a collection of declarative primitives for managing visual… bolasblack/http-api-guide.

    بدائل مفتوحة المصدر لـ Animate.css

    مشاريع مفتوحة المصدر مشابهة، مرتبة حسب عدد الميزات المشتركة مع Animate.css.
    • minimac/magicالصورة الرمزية لـ miniMAC

      miniMAC/magic

      8,601عرض على GitHub↗

      Magic is a CSS animation library and visual effects framework providing a collection of predefined motion styles for moving, rotating, and transforming web elements. It serves as a build-time CSS optimizer that compiles only the specific animation styles used in a project to minimize the final stylesheet size. The framework enables interactive user interface development by allowing animations to be triggered programmatically through scripts, hover events, or timing delays. It utilizes a system of timing and motion classes to manage the duration and speed of visual transitions. The project co

      SCSS
      عرض على GitHub↗8,601
    • rombohq/tailwindcss-motionالصورة الرمزية لـ romboHQ

      romboHQ/tailwindcss-motion

      3,295عرض على GitHub↗

      This project is a Tailwind CSS animation library and accessibility-aware motion framework. It provides a collection of utility classes for adding high-performance keyframe animations and motion effects to web projects, while automatically respecting user-defined reduced motion preferences. The system includes a browser-based animation designer for creating and exporting custom presets as CSS styles or utility classes. It also functions as a scroll-triggered animation framework, enabling entrance and exit transitions that execute as elements enter the viewport, including support for staggered

      TypeScriptanimateanimationcss
      عرض على GitHub↗3,295
    • elrumordelaluz/csshakeالصورة الرمزية لـ elrumordelaluz

      elrumordelaluz/csshake

      4,881عرض على GitHub↗

      csshake is a CSS animation library and framework designed to create shaking, vibrating, and oscillating movement effects on DOM elements. It functions as a UI feedback component that uses visual motion patterns to signal errors or draw user attention through irregular element movement. The library provides multi-axis shake effects, including horizontal, vertical, and rotational motion patterns. These are implemented through class-based triggering mechanisms that allow for the delivery of error-signaling patterns and other attention-grabbing effects. The system covers a range of animation con

      SCSSanimationcsscsshake
      عرض على GitHub↗4,881
    • matthieua/wowالصورة الرمزية لـ matthieua

      matthieua/WOW

      9,903عرض على GitHub↗

      WOW is a JavaScript library and frontend animation controller that triggers CSS animations when elements enter the browser viewport during scrolling. It functions as a viewport trigger engine, managing the timing and execution of visual transitions for both static and dynamic page content. The library integrates scroll events with CSS animations and effects from libraries such as Animate.css. It utilizes intersection observers to monitor viewport entry and mutation observers to track and apply animation triggers to new elements added to the DOM after the initial setup.

      JavaScript
      عرض على GitHub↗9,903
    عرض جميع البدائل الـ 30 لـ Animate.css→