{"id":22893336,"url":"https://github.com/yet3/scss-timed-keyframes","last_synced_at":"2026-01-11T01:40:27.792Z","repository":{"id":259527337,"uuid":"878121762","full_name":"yet3/scss-timed-keyframes","owner":"yet3","description":"A sass mixin for easily making animations with specific durations","archived":false,"fork":false,"pushed_at":"2024-10-24T20:24:29.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-07T01:24:32.446Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yet3.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,"publiccode":null,"codemeta":null}},"created_at":"2024-10-24T20:20:40.000Z","updated_at":"2024-10-24T20:24:33.000Z","dependencies_parsed_at":"2024-10-26T08:08:47.819Z","dependency_job_id":"7fbb878a-eb45-4a5a-a59e-3850af99dc51","html_url":"https://github.com/yet3/scss-timed-keyframes","commit_stats":null,"previous_names":["yet3/scss-timed-keyframes"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Fscss-timed-keyframes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Fscss-timed-keyframes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Fscss-timed-keyframes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Fscss-timed-keyframes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yet3","download_url":"https://codeload.github.com/yet3/scss-timed-keyframes/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246552237,"owners_count":20795785,"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":[],"created_at":"2024-12-13T23:14:05.159Z","updated_at":"2026-01-11T01:40:27.749Z","avatar_url":"https://github.com/yet3.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Timed keyframes\n\nA [sass](https://sass-lang.com/) mixin for easily making animations with specific durations. \n\n### Usage\n```scss\n@include timed_keyframes(\n    animated-colors,\n    (red 1.5s),\n    (blue 1.5s 1.5s),\n    (red 0.5s),\n    (cyan 1.5s 1s),\n    (red 0.5s 2s),\n  )\n  using ($step) {\n  @if $step == red {\n    background: red;\n  } @else if $step == blue {\n    background: blue;\n  } @else if $step == cyan {\n    background: cyan;\n  }\n}\n```\n\nResult\n```css\n:root {\n  --duration-animated-colors: 10000ms;\n}\n\n@keyframes animated-colors {\n  0%,\n  15% {\n    background: red;\n  }\n  30%,\n  45% {\n    background: blue;\n  }\n  50% {\n    background: red;\n  }\n  65%,\n  75% {\n    background: cyan;\n  }\n  80%,\n  100% {\n    background: red;\n  }\n}\n```\n\n\n### TODO\n- [ ] Add more options\n    - Options to auto-generate animation class\n    - Option to customize duration's var prefix or maybe to just specifie the entire name\n- [ ] Write tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyet3%2Fscss-timed-keyframes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyet3%2Fscss-timed-keyframes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyet3%2Fscss-timed-keyframes/lists"}