{"id":29126315,"url":"https://github.com/zero-to-mastery/animation-nation","last_synced_at":"2025-08-18T05:49:16.655Z","repository":{"id":37266145,"uuid":"211423942","full_name":"zero-to-mastery/Animation-Nation","owner":"zero-to-mastery","description":"A ZTM Challenge for Hacktoberfest","archived":false,"fork":false,"pushed_at":"2025-08-15T16:02:45.000Z","size":2444370,"stargazers_count":367,"open_issues_count":2,"forks_count":3665,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-15T18:30:43.280Z","etag":null,"topics":["art","css","hacktoberfest"],"latest_commit_sha":null,"homepage":"https://zero-to-mastery.github.io/Animation-Nation/","language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zero-to-mastery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-09-28T00:59:16.000Z","updated_at":"2025-08-15T16:02:54.000Z","dependencies_parsed_at":"2023-10-20T16:52:28.181Z","dependency_job_id":"6a0e18dd-02ad-4e25-a90f-6833bf35febf","html_url":"https://github.com/zero-to-mastery/Animation-Nation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zero-to-mastery/Animation-Nation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2FAnimation-Nation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2FAnimation-Nation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2FAnimation-Nation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2FAnimation-Nation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zero-to-mastery","download_url":"https://codeload.github.com/zero-to-mastery/Animation-Nation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2FAnimation-Nation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270951284,"owners_count":24674007,"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","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["art","css","hacktoberfest"],"created_at":"2025-06-29T23:04:29.920Z","updated_at":"2025-08-18T05:49:16.572Z","avatar_url":"https://github.com/zero-to-mastery.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003ch1\u003e ✨ Animation Nation ✨\u003c/h1\u003e\n    \u003cimg src=\"https://img.shields.io/github/repo-size/zero-to-mastery/Animation-Nation?style=for-the-badge\" /\u003e\n    \u003cimg src=\"https://img.shields.io/github/contributors-anon/zero-to-mastery/Animation-Nation?style=for-the-badge\" /\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues-pr-closed-raw/zero-to-mastery/Animation-Nation?style=for-the-badge\" /\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\nWelcome to **Animation Nation**, a fun and creative project by the [ZTM Community](https://github.com/zero-to-mastery)! 🎉\n\nThis repository is a space where developers of all levels, especially **beginners**,  \ncan contribute, showcase their creativity.  \nWhether you're a seasoned developer or writing your first line of code,  \nwe'd love to see your animated artwork using only **HTML** and **CSS**\n\n\u003e [!IMPORTANT]\n\u003e no **JavaScript** or **images** or **SVG** allowed!\n\n## 🌟 Why Contribute?\n\n- **Gain GitHub experience** by contributing to open-source repositories.\n- **Join a supportive community** where you can share your creativity and get feedbacks in our Discord.\n- **Enhance your skills** in HTML and CSS while learning GitHub workflows.\n\n## 🎯 Objective Overview\n\nCreate an animation using CSS and HTML only (no JavaScript, no SVG).  \nA [CSS animation](https://developer.mozilla.org/fr/docs/Web/CSS/animation) refers to the css rule `animation`.\n\nThe purpose is to display a creative and looping animation  \n_( alike animation in GIFs )_\n\n### Should\n\n- the animation should be looping\n- the animation should not require any user interaction ( click, hover, etc ... )\n\n### Should not\n\nAn animation should not be:\n\n- a form,\n- a portfolio,\n- a button to click on,\n- a landing page, etc...\n  _( which are elements requiring user interaction )_\n\nHere is an example of an expected animation:  \n\u003cimg src=\"./public/example-animation.gif\" alt=\"triangle\" /\u003e\n\n### ☝️ Keep in mind\n\nWe keep things simple! Here are the rules for contributing:\n\n- Use **HTML** and **CSS** only. No **JavaScript**. No **Images/SVGs**.\n- Your project must include **at least one animation**.\n- Don't copy work from others. Make sure your code is **original** so you can showcase your own skills.\n\n## 🚀 How to contribute\n\n\u003e [!TIP]\n\u003e 📌 Don't worry if it's your first time contributing—below,  \n\u003e we've got detailed steps and resources to help you get started!\n\n### 🔥 Contribution Guide: Step-by-Step\n\n\u003cdetails\u003e\n\t\u003csummary\u003e💡 Quick overview of the Development Workflow\u003c/summary\u003e\n\n1. **Fork the repo** to your GitHub account.\n2. **Clone your fork** to your local machine.\n3. **Create a branch**, you should not be working in the main/master branch\n4. Create a new directory in the Art directory. Naming it \u003cyour_github_username\u003e-\u003cyour_arts_name\u003e\n5. Create your animated HTML and CSS artwork.\n6. Pull down recent changes\n7. **Submit a pull request (PR)** with your animated artwork\n   _Ensure to review yourself in Github during your PR submission\n   before definitely submitting your PR_\n8. **OPTIONAL** [Tweet about making your first Hacktoberfest pull request](https://ctt.ac/36L1C), and you're done! 🎉\n\u003c/details\u003e\n\n#### 1. Fork This Repository\n\nIf you're new to GitHub, no worries!  \nForking a repository means creating a copy  \nof this project under your GitHub account.  \nCheck out these beginner-friendly resources for more help:\n\n- [Start Here Guidelines](https://github.com/zero-to-mastery/start-here-guidelines)\n- [How to Fork a Repository](https://docs.github.com/en/get-started/quickstart/fork-a-repo)\n- [Aldo's Contributing to Github video](https://www.youtube.com/watch?v=uQLNFRviB6Q)\n\n\u003cbr\u003e\n\n---\n\n#### 2. Clone Your Fork\n\nOnce you've forked the repo, clone it to your local machine  \nso you can work on it.\nUse this command:\n\n```bash\ngit clone https://github.com/\u003cyour-github-username\u003e/Animation-Nation.git\n```\n\n\u003cbr\u003e\n\n---\n\n#### 3. Create A Branch\n\nCreate a new branch from `master` or `main`\n_Working in the `master` or `main` branch is often frowned upon  \nand are usually expected to branch off. Branching also helps  \nto reduce the chance of a merge conflict._\n\n\u003cbr\u003e\n\n---\n\n#### 4. Create Your Artwork\n\nNow for the fun part! Inside the `Art/` folder:\n\n\u003e [!WARNING]  \n\u003e It is important to name the directory and your files exactly as mentioned\n\n\u003e [!NOTE]\n\u003e Per contribution folder: it should have only 3 files [ `index.html`, `styles.css`, `meta.json` ]\n\n- Create a new directory named:  \n  `\u003cgithub_username\u003e-\u003cart_name\u003e` eg. `mattcsmith-helloworld`.\n- Inside **your** folder, create an `index.html` file\n- Inside **your** folder, create an `styles.css` file\n- Inside **your** folder, create an `meta.json` file  \n  to specify your art name, github author and github link  \n  Note:\n  - copy the following snippet ( without the comment )\n  - and replace only the values with your own details.\n  - Do not change the JSON keys\n\n```json\n// Example\n{\n  \"artName\": \"triangle\",\n  \"githubHandle\": \"mattcsmith\"\n}\n```\n\n🎉 Use these to create your **animated artwork** — let your creativity flow!\n\n\u003cbr\u003e\n\n---\n\n#### 5. Submit a Pull Request (PR)\n\nAfter completing your artwork, you are now ready to create  \na pull request and have it added to the collection.\n\nRemembering\n\n- to first **pull down** the recent changes from to the upstream,\n- **commit** your changes,\n- **push** them to your forked repo,  \n  and submit a PR.  \n  If you're unfamiliar with pull requests, check out the following resources  \n  or drop a message in the Hacktoberfest channel on Discord.\n- [Creating a Pull Request](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests)\n- [Aldo's Contributing to Github video](https://www.youtube.com/watch?v=uQLNFRviB6Q)\n\n\u003cbr\u003e\n\n---\n\n#### 6. OPTIONAL - Tweet about your progress\n\nOptionally you can [Tweet about making your first Hacktoberfest pull request](https://ctt.ac/36L1C) on X\n\n\u003cbr\u003e\n\n---\n\n## ⚠️ Important Notes Summary\n\n- You can contribute multiple animations, just create  \n  a new directory with your `\u003cgithub_username\u003e-\u003cart_name\u003e`\n- Ensure to have the **3 required files**\n- Ensure that you have not modified any other file outside of your own directory\n- Ensure that your directory includes an `index.html` and `styles.css`,  \n  these **exact names are important**.\n- Do **NOT** include any **images**, **SVG**'s or **other files**.  \n  Optimized images will be generate automatically  \n  to keep the repository at a manageable size.\n\nFor maintenance reasons:\n\n- Keep checking regularly your pull requests to address provided reviews  \n  Reviewers will take time to check PRs, provide reviews and handle all  \n  the repository PRs.\n\n- After a while of no activity after a reviewer gave you reviews:\n  - a label `stale` could be set\n  - and/or the PR could be closed\n\n---\n\n## 🙌 Let's Connect !\n\nWe encourage everyone to share their progress,  \nask for help, or discuss ideas in the ZTM Discord community.  \nWe're here to support you!\n\nReady? Let’s make some amazing CSS animations together! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzero-to-mastery%2Fanimation-nation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzero-to-mastery%2Fanimation-nation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzero-to-mastery%2Fanimation-nation/lists"}