{"id":27714758,"url":"https://github.com/devsandeepsharma/animate-me","last_synced_at":"2025-04-27T00:55:41.323Z","repository":{"id":288401699,"uuid":"967931257","full_name":"devsandeepsharma/animate-me","owner":"devsandeepsharma","description":"A fun mini project to practice CSS animations! ✨✨💕","archived":false,"fork":false,"pushed_at":"2025-04-17T09:31:21.000Z","size":506,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T00:55:38.046Z","etag":null,"topics":["bem-naming","css-animations","css3","html5","semantic-ui"],"latest_commit_sha":null,"homepage":"https://animate-me-mu.vercel.app","language":"CSS","has_issues":true,"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/devsandeepsharma.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":"2025-04-17T08:20:21.000Z","updated_at":"2025-04-17T09:36:52.000Z","dependencies_parsed_at":"2025-04-18T00:08:20.949Z","dependency_job_id":"c0e28e1d-bd5a-4ef9-a384-0051ce34efdc","html_url":"https://github.com/devsandeepsharma/animate-me","commit_stats":null,"previous_names":["devsandeepsharma/animate-me"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsandeepsharma%2Fanimate-me","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsandeepsharma%2Fanimate-me/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsandeepsharma%2Fanimate-me/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsandeepsharma%2Fanimate-me/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devsandeepsharma","download_url":"https://codeload.github.com/devsandeepsharma/animate-me/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251073635,"owners_count":21532009,"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":["bem-naming","css-animations","css3","html5","semantic-ui"],"created_at":"2025-04-27T00:55:40.899Z","updated_at":"2025-04-27T00:55:41.311Z","avatar_url":"https://github.com/devsandeepsharma.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Animate Me\n\nThis was a fun project where I learned about CSS animations.\n\n## Learnings\n\n### 1. 🔄 Transitions\n\nTransitions allow you to smoothly change between two states when interacting with elements, like **hovering** or **focusing**. \n\nKey properties for transitions include :-\n\n* transition-property:-  Specifies the CSS property that will change (e.g., transform, background-color).\n\n* transition-duration:-  Defines how long the transition lasts (e.g., 0.3s).\n\n* transition-timing-function:-  Specifies the speed curve of the transition (e.g., ease, linear, ease-in-out).\n\n* transition-delay:-  Adds a delay before the transition starts (e.g., 0.5s).\n\n**Example:**\n\n```css\n.btn {\n  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n}\n\n.btn:hover {\n  transform: scale(1.1); /* Scale the button on hover */\n  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Add a glow effect */\n}\n```\n\nHere, the button smoothly grows and gains a glowing effect on hover, thanks to the transition-duration and timing-function.\n\n### 2. 🎬 Keyframe Animations\n\nWith **@keyframes**, we can define custom animations. These animations can have different start and end states, or even intermediate steps.\n\nKey properties for keyframes :-\n\n* animation-name :- The name of the animation.\n\n* animation-duration :-  How long the animation lasts (e.g., 2s).\n\n* animation-timing-function :-  Controls the pace of the animation (e.g., linear, ease-in).\n\n* animation-delay :-  Sets a delay before the animation starts.\n\n* animation-iteration-count :-  How many times the animation should repeat (e.g., infinite).\n\n* animation-direction :-  Specifies whether the animation should alternate or play in reverse.\n\n**Example:**\n\n```css\n@keyframes fadeIn {\n  0% { opacity: 0; }\n  100% { opacity: 1; }\n}\n\n.fade-in-element {\n  animation: fadeIn 2s ease-in-out;\n}\n```\nIn this example, the element fades in when the fadeIn animation is applied. The animation-duration of 2s specifies the transition time, and ease-in-out controls the fade-in effect.\n\n### 3. 🔄 Transforms\n\n**Transforms** allow you to visually manipulate elements. You can move, resize, rotate, and more without affecting the layout of your page.\n\nCommon transform properties :-\n\n* transform :-  translate(x, y): Moves the element along the X and Y axes.\n\n* transform :-  scale(x, y): Resizes the element along the X and Y axes.\n\n* transform :-  rotate(deg): Rotates the element by the specified degree.\n\nThese properties can be combined with transitions for smooth animations.\n\n**Example:**\n\n```css\n.card {\n  transition: transform 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-10px); /* Moves the card slightly up on hover */\n}\n```\n\nHere, when you hover over the card, it gently moves upwards due to the transition-duration and transform properties.\n\n## Preview\n\u003cimg src=\"./images/1.png\"\u003e\n\u003cimg src=\"./images/2.png\"\u003e\n\u003cimg src=\"./images/3.png\"\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsandeepsharma%2Fanimate-me","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevsandeepsharma%2Fanimate-me","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsandeepsharma%2Fanimate-me/lists"}