IanLunn/Hover
Hover
Hover is a collection of pre-defined CSS3 animations and reusable stylesheets for links, buttons, and images. It serves as a web UI animation kit and a library of styles written in CSS, Sass, and LESS to provide visual feedback when a user hovers over an element.
The library includes specialized interactive effects that simulate tactile behaviors, such as page curls and the rendering of speech bubbles. It also provides a set of animation primitives to manipulate backgrounds, borders, shadows, and glow effects to simulate depth and elevation.
The project covers a wide range of element motion transformations, including scaling, rotating, pulsing, and wobbling. It specifically handles icon animations that trigger movement or transformation on child elements when a parent element is hovered.
Features
- CSS Hover Effect Libraries - Provides a comprehensive collection of pre-defined CSS3 hover animations for links, buttons, and images.
- Interaction Animations - Offers a comprehensive library of pre-defined CSS3 animations for links and buttons that trigger on hover and focus states.
- Animations and Motion - Provides CSS-based motion effects like scaling, rotating, and pulsing for web components.
- Composite Transformation Effects - Combines scaling, rotation, and translation properties to simulate physical movement and depth.
- CSS State Transitions - Employs CSS pseudo-classes to trigger fluid visual animations and state changes upon user hover.
- CSS Transitions - Provides declarative CSS transition rules for implementing complex hover states and border effects.
- Interaction Feedback Effects - Implements specialized tactile interaction effects, such as page curls and speech bubbles.
- Interactive UI Components - Offers an animation library of interactive components to provide visual feedback on buttons and links.
- Keyframe Animation Engines - Defines time-based keyframe sequences to create complex and fluid motion effects.
- Motion Libraries - Provides a library of motion transformations including scaling, rotating, and shaking for UI elements.
- Transition Effects - Implements visual transition effects like pulsing and wobbling during element state changes.
- UI Animations - Ships as a complete web UI animation kit featuring specialized effects like page curls and speech bubbles.
- Animated Borders - Applies dynamic border effects, including shifting underlines and outlines, during user interaction.
- Child-Element Triggered Animations - Triggers rotation and movement animations on child icons when a parent element is hovered.
- Animations and Effects - Combines various motion and transformation effects to create directional pulsing visual cues on icons.
- Tactile Simulations - Implements a specialized page curl simulation that mimics the folding of an element corner for a tactile feel.
- Shadow Effects - Provides utilities for glow, inset shadows, and illumination effects to simulate depth and elevation during hover states.
- Background Effects - Implements dynamic background animations using fades and radial transitions.
- Callout UI Elements - Provides the ability to render directional speech bubble callouts that float around elements to display supplementary information.
- CSS Preprocessors - Utilizes CSS preprocessors like Sass and LESS to create reusable style definitions for dynamic effects.
- Pseudo-Element Injections - Uses CSS pseudo-elements to create decorative overlays and glows without modifying the HTML structure.
- Sass-Based Preprocessor Architectures - Uses Sass preprocessor architectures to generate scalable and reusable CSS for hover effects.
- 动画(Animate) - Listed in the “动画(Animate)” section of the Awesome Frontend awesome list.
