{"id":22940871,"url":"https://github.com/scottgriv/css-animation_collection","last_synced_at":"2026-02-13T22:05:21.973Z","repository":{"id":221056971,"uuid":"753329199","full_name":"scottgriv/css-animation_collection","owner":"scottgriv","description":"A collection of useful animations built using CSS.","archived":false,"fork":false,"pushed_at":"2025-01-09T04:08:47.000Z","size":1298,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-06T07:41:17.638Z","etag":null,"topics":["activity-indicator","animations","code-pen","codepen","css","loading-animations","loading-screen"],"latest_commit_sha":null,"homepage":"https://codepen.io/scottgriv","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scottgriv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-05T22:44:34.000Z","updated_at":"2025-01-09T04:08:50.000Z","dependencies_parsed_at":"2024-02-06T00:23:07.988Z","dependency_job_id":"b1122151-75a2-40cd-bd18-9aff14ce0ccd","html_url":"https://github.com/scottgriv/css-animation_collection","commit_stats":null,"previous_names":["scottgriv/css-animation_collection"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fcss-animation_collection","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fcss-animation_collection/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fcss-animation_collection/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scottgriv%2Fcss-animation_collection/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scottgriv","download_url":"https://codeload.github.com/scottgriv/css-animation_collection/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237652368,"owners_count":19344876,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["activity-indicator","animations","code-pen","codepen","css","loading-animations","loading-screen"],"created_at":"2024-12-14T13:33:00.546Z","updated_at":"2026-02-13T22:05:21.967Z","avatar_url":"https://github.com/scottgriv.png","language":"CSS","readme":"\u003c!-- Begin README --\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/scottgriv/css-animation_collection\" target=\"_blank\"\u003e\n        \u003cimg src=\"./docs/images/icon.png\" width=\"200\" height=\"200\"/\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.javascript.com/\"\u003e\u003cimg src=\"https://img.shields.io/badge/JavaScript-ES13-F7DF1E?style=for-the-badge\u0026logo=javascript\" alt=\"JavaScript Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.w3schools.com/html/\"\u003e\u003cimg src=\"https://img.shields.io/badge/HTML-5-E34F26?style=for-the-badge\u0026logo=html5\" alt=\"HTML Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.w3schools.com/css/)\"\u003e\u003cimg src=\"https://img.shields.io/badge/CSS-3-1572B6?style=for-the-badge\u0026logo=css3\" alt=\"CSS Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://stackoverflow.com/questions/74825198/close-to-end-of-the-page-element-needs-to-disappear\"\u003e\u003cimg src=\"https://img.shields.io/badge/Stack_Overflow-Answer-F58025?style=for-the-badge\u0026logo=stackoverflow\" alt=\"Stack Overflow Badge\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/github-follow_me-181717?style=for-the-badge\u0026logo=github\u0026color=181717\" alt=\"GitHub Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"mailto:scott.grivner@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/gmail-contact_me-EA4335?style=for-the-badge\u0026logo=gmail\" alt=\"Email Badge\" /\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.buymeacoffee.com/scottgriv\"\u003e\u003cimg src=\"https://img.shields.io/badge/buy_me_a_coffee-support_me-FFDD00?style=for-the-badge\u0026logo=buymeacoffee\u0026color=FFDD00\" alt=\"BuyMeACoffee Badge\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://prgportfolio.com\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRG-Bronze Project-CD7F32?style=for-the-badge\u0026logo=data:image/svg%2bxml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiB3aWR0aD0iMjYuMDAwMDAwcHQiIGhlaWdodD0iMzQuMDAwMDAwcHQiIHZpZXdCb3g9IjAgMCAyNi4wMDAwMDAgMzQuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+Cgo8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwzNC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiNDRDdGMzIiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0xMiAzMjggYy04IC04IC0xMiAtNTEgLTEyIC0xMzUgMCAtMTA5IDIgLTEyNSAxOSAtMTQwIDQyIC0zOCA0OAotNDIgNTkgLTMxIDcgNyAxNyA2IDMxIC0xIDEzIC03IDIxIC04IDIxIC0yIDAgNiAyOCAxMSA2MyAxMyBsNjIgMyAwIDE1MCAwCjE1MCAtMTE1IDMgYy04MSAyIC0xMTkgLTEgLTEyOCAtMTB6IG0xMDIgLTc0IGMtNiAtMzMgLTUgLTM2IDE3IC0zMiAxOCAyIDIzCjggMjEgMjUgLTMgMjQgMTUgNDAgMzAgMjUgMTQgLTE0IC0xNyAtNTkgLTQ4IC02NiAtMjAgLTUgLTIzIC0xMSAtMTggLTMyIDYKLTIxIDMgLTI1IC0xMSAtMjIgLTE2IDIgLTE4IDEzIC0xOCA2NiAxIDc3IDAgNzIgMTggNzIgMTMgMCAxNSAtNyA5IC0zNnoKbTExNiAtMTY5IGMwIC0yMyAtMyAtMjUgLTQ5IC0yNSAtNDAgMCAtNTAgMyAtNTQgMjAgLTMgMTQgLTE0IDIwIC0zMiAyMCAtMTgKMCAtMjkgLTYgLTMyIC0yMCAtNyAtMjUgLTIzIC0yNiAtMjMgLTIgMCAyOSA4IDMyIDEwMiAzMiA4NyAwIDg4IDAgODggLTI1eiIvPgo8L2c+Cjwvc3ZnPgo=\" alt=\"Bronze\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---------------\n\n\u003ch1 align=\"center\"\u003eCSS Animation Collection\u003c/h1\u003e\n\nA collection of useful animations built using CSS.\n\nThis collection consists of the following animations:\n\n- **Font Awesome CSS Animations**: [Animations from Font Awesome](https://fontawesome.com/docs/web/style/animate) recreated using only CSS.\n    - Folder Path: `src/font_awesome_animations` \n    - View it on CodePen [here](https://codepen.io/scottgriv/pen/zYbVEww).\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://codepen.io/scottgriv/pen/zYbVEww\"\u003e\u003cimg src=\"./docs/images/demo_4.gif\" width=\"50%\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ci\u003eFont Awesome CSS Animations.\u003c/i\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n- **Wave Animation:** A rising and falling wave activity indicator animation built using CSS.\n    - Folder Path: `src/wave_animation` \n    - View it on CodePen [here](https://codepen.io/scottgriv/pen/OJrpBvg).\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://codepen.io/scottgriv/pen/OJrpBvg\"\u003e\u003cimg src=\"./docs/images/demo_1.gif\" width=\"50%\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ci\u003eWave Animation.\u003c/i\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003e ![NOTE]\n\u003e Adjustments may need to be made for this to fit your desired screen size.\n\n- **Spinning Activity Indicator Animation:** A spinning activity indicator animation built using CSS.\n    - Folder Path: `src/spinner_animation` \n    - View it on CodePen [here](https://codepen.io/scottgriv/pen/ZEVBpgw).\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://codepen.io/scottgriv/pen/ZEVBpgw\"\u003e\u003cimg src=\"./docs/images/demo_2.gif\" width=\"50%\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ci\u003eSpinning Activity Indicator Animation.\u003c/i\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n- **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)).\n    - Folder Path: `src/scrolling_element` \n    - View it on CodePen [here](https://codepen.io/scottgriv/pen/poqRaGB).\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://codepen.io/scottgriv/pen/poqRaGB\"\u003e\u003cimg src=\"./docs/images/demo_3.gif\" width=\"50%\" /\u003e\u003c/a\u003e\n    \u003cbr\u003e\n    \u003ci\u003eDisappearing Scrolling Element\u003c/i\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n---------------\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Resources](#resources)\n- [License](#license)\n- [Credits](#credits)\n\n## Getting Started\n\n1. Clone this repository to your local machine.\n2. View each animation by following the paths mentioned above.\n3. Open the ```index.html``` file in your web browser.\n4. View the animation.\n5. Feel free to plug in the animations into your own projects.\n\n## Resources\n\n- [JavaScript](https://www.javascript.com/)\n- [HTML](https://www.w3schools.com/html/)\n- [CSS](https://www.w3schools.com/css/)\n\n## License\n\nThis project is released under the terms of **The Unlicense**, which allows you to use, modify, and distribute the code as you see fit. \n- [The Unlicense](https://choosealicense.com/licenses/unlicense/) removes traditional copyright restrictions, giving you the freedom to use the code in any way you choose.\n- For more details, see the [LICENSE](LICENSE) file in this repository.\n\n## Credits\n\n**Author:** [Scott Grivner](https://github.com/scottgriv) \u003cbr\u003e\n**Email:** [scott.grivner@gmail.com](mailto:scott.grivner@gmail.com) \u003cbr\u003e\n**Website:** [linktr.ee/scottgriv](https://www.linktr.ee/scottgriv) \u003cbr\u003e\n**Reference:** [Main Branch](https://github.com/scottgriv/css-animation_collection) \u003cbr\u003e\n\n---------------\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://linktr.ee/scottgriv\" target=\"_blank\"\u003e\n        \u003cimg src=\"./docs/images/footer.png\" width=\"100\" height=\"100\"/\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c!-- End README --\u003e\n","funding_links":["https://www.buymeacoffee.com/scottgriv"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fcss-animation_collection","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscottgriv%2Fcss-animation_collection","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscottgriv%2Fcss-animation_collection/lists"}