{"id":19856668,"url":"https://github.com/twilight92/web-animations-api","last_synced_at":"2026-03-03T09:31:46.305Z","repository":{"id":255469357,"uuid":"851600166","full_name":"twilight92/web-animations-API","owner":"twilight92","description":"[Web Animation API] 웹 애니메이션의 새로운 표준 #인프런","archived":false,"fork":false,"pushed_at":"2024-09-05T20:57:42.000Z","size":536,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T21:17:55.548Z","etag":null,"topics":["css-animations","webanimation-api"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/twilight92.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}},"created_at":"2024-09-03T11:48:45.000Z","updated_at":"2024-09-05T20:57:45.000Z","dependencies_parsed_at":"2024-09-05T15:38:23.979Z","dependency_job_id":"2c4384b0-cd67-42fc-a9ae-ed54b9c03592","html_url":"https://github.com/twilight92/web-animations-API","commit_stats":null,"previous_names":["twilight92/web-animations-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/twilight92/web-animations-API","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilight92%2Fweb-animations-API","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilight92%2Fweb-animations-API/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilight92%2Fweb-animations-API/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilight92%2Fweb-animations-API/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twilight92","download_url":"https://codeload.github.com/twilight92/web-animations-API/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twilight92%2Fweb-animations-API/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30039884,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T06:58:30.252Z","status":"ssl_error","status_checked_at":"2026-03-03T06:58:15.329Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css-animations","webanimation-api"],"created_at":"2024-11-12T14:16:14.399Z","updated_at":"2026-03-03T09:31:45.120Z","avatar_url":"https://github.com/twilight92.png","language":"HTML","readme":"# web-animations-API\n![image](https://github.com/user-attachments/assets/e791df51-588a-4327-a2a5-a7207351933f)\n\u003cbr\u003e\n\n라이브러리를 사용해야 가능했던 웹 애니메이션 관련 기능들의 표준 구현체이다.\u003cbr\u003e\nCSS 애니메이션 구현을 기반으로 설계된 API로,\u003cbr\u003e기존 CSS 애니메이션의 장점을 살리면서 구현은 더 간편한 것이 특징이다.\n\n\u003cbr\u003e\n\n## What I Learned\n- 자바스크립트로 CSS 애니메이션을 자유자재로 컨트롤\u003cbr\u003e\n- 웹 애니메이션 표준 기술(Web Standard)\n\n\u003cbr\u003e\n\n## Todo\n- [x] [CSS animation VS JS animation](https://github.com/twilight92/web-animations-API/wiki/CSS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EA%B3%BC-JS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98) 알아보기\n- [x] [CSS Transition](https://github.com/twilight92/web-animations-API/wiki/CSS-Transition%EA%B3%BC-CSS-Animation)\n  - object 태그를 활용하여 svg에 transition 적용 실습\n- [x] [CSS Animation](https://github.com/twilight92/web-animations-API/wiki/CSS-Transition%EA%B3%BC-CSS-Animation#css-animation)\n- [x] GPU 가속과 레이아웃 재계산이 필요한 속성들 알아보기\n- [x] [Web Animation API](https://github.com/twilight92/web-animations-API/wiki/Web-Animation-API) 기본\n  - Web Animation API란?\n  - 기본 애니메이션 만들기\n  - 키프레임과 옵션 분리하기\n  - 애니메이션 컨트롤(Promise 사용가능)\n    - `animation.play()`\n    - `animation.pause()`\n    - `animation.playbackRate`\n    - `animation.playState`\n    - `animation.finished`\n    - `animation.ready`\n  - 애니메이션 생성자 이용\n- [x] [여러 개의 객체에 애니메이션 적용하기](https://github.com/twilight92/web-animations-API/wiki/%EC%97%AC%EB%9F%AC-%EA%B0%9C%EC%9D%98-%EA%B0%9D%EC%B2%B4%EC%97%90-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0)\n  - 각각의 객체에 개별 애니메이션 적용하기\n  - GroupEffect로 한꺼번에 애니메이션 적용하기\n  - SequenceEffect로 순차적으로 애니메이션 적용하기\n  - Starfield 만들기\u003cbr\u003e\u003cimg src=\"https://github.com/user-attachments/assets/a72d55ea-598a-4db2-82c2-79a8f6521010\" width=300\u003e\n  - [Motion Path](https://github.com/twilight92/web-animations-API/wiki/Motion-Path)로 경로를 따라 이동시키기\u003cbr\u003e\u003cimg src=\"https://github.com/user-attachments/assets/a9b16cc1-ed2d-4930-ac4b-6df7ad39b542\" width=300\u003e\n\u003cbr\u003e\n\n## 개인적인 궁금증 해결\n- [Canvas VS Web Animation API](https://github.com/twilight92/web-animations-API/wiki/Canvas-Vs-Web-Animation-API)\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwilight92%2Fweb-animations-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwilight92%2Fweb-animations-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwilight92%2Fweb-animations-api/lists"}