https://github.com/scottgriv/css-animation_collection
A collection of useful animations built using CSS.
https://github.com/scottgriv/css-animation_collection
activity-indicator animations code-pen codepen css loading-animations loading-screen
Last synced: 13 days ago
JSON representation
A collection of useful animations built using CSS.
- Host: GitHub
- URL: https://github.com/scottgriv/css-animation_collection
- Owner: scottgriv
- License: unlicense
- Created: 2024-02-05T22:44:34.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-09T04:08:47.000Z (4 months ago)
- Last Synced: 2025-02-06T07:41:17.638Z (3 months ago)
- Topics: activity-indicator, animations, code-pen, codepen, css, loading-animations, loading-screen
- Language: CSS
- Homepage: https://codepen.io/scottgriv
- Size: 1.24 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---------------
CSS Animation Collection
A collection of useful animations built using CSS.
This collection consists of the following animations:
- **Font Awesome CSS Animations**: [Animations from Font Awesome](https://fontawesome.com/docs/web/style/animate) recreated using only CSS.
- Folder Path: `src/font_awesome_animations`
- View it on CodePen [here](https://codepen.io/scottgriv/pen/zYbVEww).
Font Awesome CSS Animations.
- **Wave Animation:** A rising and falling wave activity indicator animation built using CSS.
- Folder Path: `src/wave_animation`
- View it on CodePen [here](https://codepen.io/scottgriv/pen/OJrpBvg).
Wave Animation.
> ![NOTE]
> Adjustments may need to be made for this to fit your desired screen size.
- **Spinning Activity Indicator Animation:** A spinning activity indicator animation built using CSS.
- Folder Path: `src/spinner_animation`
- View it on CodePen [here](https://codepen.io/scottgriv/pen/ZEVBpgw).
Spinning Activity Indicator Animation.
- **Disappearing Scrolling Element**: A disappearing HTML element based on scrolling behavior (based on a [Stack Overflow Answer](https://stackoverflow.com/questions/74825198/close-to-end-of-the-page-element-needs-to-disappear)).
- Folder Path: `src/scrolling_element`
- View it on CodePen [here](https://codepen.io/scottgriv/pen/poqRaGB).
Disappearing Scrolling Element
---------------
## Table of Contents
- [Getting Started](#getting-started)
- [Resources](#resources)
- [License](#license)
- [Credits](#credits)
## Getting Started
1. Clone this repository to your local machine.
2. View each animation by following the paths mentioned above.
3. Open the ```index.html``` file in your web browser.
4. View the animation.
5. Feel free to plug in the animations into your own projects.
## Resources
- [JavaScript](https://www.javascript.com/)
- [HTML](https://www.w3schools.com/html/)
- [CSS](https://www.w3schools.com/css/)
## License
This project is released under the terms of **The Unlicense**, which allows you to use, modify, and distribute the code as you see fit.
- [The Unlicense](https://choosealicense.com/licenses/unlicense/) removes traditional copyright restrictions, giving you the freedom to use the code in any way you choose.
- For more details, see the [LICENSE](LICENSE) file in this repository.
## Credits
**Author:** [Scott Grivner](https://github.com/scottgriv)
**Email:** [[email protected]](mailto:[email protected])
**Website:** [scottgrivner.dev](https://www.scottgrivner.dev)
**Reference:** [Main Branch](https://github.com/scottgriv/css-animation_collection)
---------------
