tictail/bounce.js
Bounce.js
bounce.js est une bibliothèque JavaScript et un wrapper programmatique pour générer et appliquer des animations CSS3 keyframe et des transformations 3D. Il fournit un outil pour créer des séquences d'animation complexes sans avoir besoin d'écrire manuellement des règles de feuille de style.
La bibliothèque permet la création d'animations en enchaînant des transformations d'échelle, de rotation, de translation et d'inclinaison. Ces séquences générées peuvent être enregistrées sous des noms uniques pour être réutilisées sur plusieurs éléments.
Le système gère le cycle de vie de l'animation via des fonctions de rappel qui se déclenchent lorsqu'une séquence visuelle se termine. Il inclut également un vérificateur de compatibilité pour vérifier si l'environnement du navigateur prend en charge les transformations 3D et les spécifications de keyframe requises.
Features
- CSS3 Hardware-Accelerated Animations - Provides a programmatic wrapper for creating complex CSS3 hardware-accelerated animations and 3D transformations.
- Animation Libraries - Acts as a JavaScript library for generating and applying CSS3 keyframe animations.
- Keyframe Animation Systems - Generates reusable CSS animation sequences by chaining scale, rotation, translation, and skew transformations.
- 3D Transform Animations - Provides a programmatic interface for creating depth-based motion effects using 3D CSS transforms.
- Chainable Definitions - Implements a chainable API to build complex CSS sequences by linking scale, rotation, and translation methods.
- Dynamic Element Animation - Allows attaching generated animations to DOM elements with support for loops and completion callbacks.
- CSS Animations - Provides a programmatic way to generate CSS keyframe animations through transformation chaining.
- Custom Keyframe Sequences - Allows the programmatic definition and injection of unique keyframe sequences for DOM elements.
- Keyframe Injection - Dynamically generates unique animation names and injects the corresponding CSS keyframe rules into the document head.
- Named Animation Registrations - Enables saving generated animation sequences under unique names for reuse across multiple elements.
- Named Theme Registrations - Maps generated animation identifiers to global styles to allow reuse across multiple elements.
- Animation Lifecycle Callbacks - Includes callback functions that trigger specifically when a CSS animation sequence completes.
- Motion Effects - Enables adding polished motion effects and 3D transitions to web elements to improve user experience.
- Animation and Motion - Instant CSS3 animation creation.
- Animations and Motion - Generates CSS3-powered animations quickly.
- CSS Animation Libraries - Tool for creating CSS3-powered animations.
- 动画(Animate) - Listed in the “动画(Animate)” section of the Awesome Frontend awesome list.
