https://github.com/khianvictorycalderon/css-animations-presets
A preset of basic css animations
https://github.com/khianvictorycalderon/css-animations-presets
animationpresets animations-presets animationspresets css css-animations css-animations-presets css-presets
Last synced: 6 months ago
JSON representation
A preset of basic css animations
- Host: GitHub
- URL: https://github.com/khianvictorycalderon/css-animations-presets
- Owner: khianvictorycalderon
- Created: 2025-03-29T01:04:22.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-03-29T01:07:35.000Z (6 months ago)
- Last Synced: 2025-03-29T02:21:59.396Z (6 months ago)
- Topics: animationpresets, animations-presets, animationspresets, css, css-animations, css-animations-presets, css-presets
- Language: CSS
- Homepage: https://khianvictorycalderon.github.io/CSS-Animations-Presets/
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS Animation Library
This project contains a collection of reusable CSS animations for various effects such as visibility, rotation, scaling, and directional movements. Additionally, it includes predefined timing functions and duration presets for easy customization.
## Animations Included
### Visibility Animation
- `animShow`: Fades in an element over time.
### Rotation Animations
- `animRotateClockwise`: Rotates an element 360 degrees in a clockwise direction.
- `animRotateCounterClockwise`: Rotates an element 360 degrees in a counterclockwise direction.
### Scaling Animations
- `animScaleUp`: Enlarges an element from scale 0 to 1.
- `animScaleDown`: Shrinks an element from scale 2 to 1.
- `animScaleDownMedium`: Shrinks an element from scale 3.5 to 1.
- `animScaleDownLarge`: Shrinks an element from scale 5 to 1.
### Directional Animations
- `animSlideLeftToRight`: Moves an element from left to right.
- `animSlideRightToLeft`: Moves an element from right to left.
- `animSlideUpToDown`: Moves an element from top to bottom.
- `animSlideDownToUp`: Moves an element from bottom to top.
### Timing Functions
- `animEaseOut`: Applies an ease-out effect.
- `animEaseIn`: Applies an ease-in effect.
- `animEaseInOut`: Applies an ease-in-out effect.
### Duration Presets
- Multiple predefined duration classes ranging from `1s` to `10.75s` for easy timing adjustments.
## Usage
To use an animation, simply apply the corresponding class to an element:
```html
Hello World!
```
## Future Enhancements
I may add more animations in the future, including additional effects, transitions, and variations to further expand this library.
## Contributions
Feel free to suggest improvements or new animations by opening an issue or submitting a pull request.
## License
This project is open-source and free to use in any project.