{"id":23015514,"url":"https://github.com/hirwa13/css-animation","last_synced_at":"2025-04-02T17:44:47.887Z","repository":{"id":191122045,"uuid":"682644369","full_name":"HIRWA13/CSS-animation","owner":"HIRWA13","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-31T11:19:32.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-15T11:12:23.165Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/HIRWA13.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}},"created_at":"2023-08-24T16:00:44.000Z","updated_at":"2023-08-28T07:00:38.000Z","dependencies_parsed_at":"2023-08-28T08:46:16.382Z","dependency_job_id":null,"html_url":"https://github.com/HIRWA13/CSS-animation","commit_stats":null,"previous_names":["hirwa13/css-animation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HIRWA13%2FCSS-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HIRWA13%2FCSS-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HIRWA13%2FCSS-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HIRWA13%2FCSS-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HIRWA13","download_url":"https://codeload.github.com/HIRWA13/CSS-animation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237778200,"owners_count":19364737,"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-15T11:12:26.455Z","updated_at":"2025-02-08T08:26:54.702Z","avatar_url":"https://github.com/HIRWA13.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Animation.\n\nin this repository includes some of the lessons and the codes regarding CSS animation and how to use them.\n\n## What is CSS Animation?\n\nCSS animation is a method of animating certain HTML elements without having to use javascript or flash. It is a very simple and easy way to add animations to your website.\n\n## How to use CSS Animation?\n\nCSS animation is very easy to use. All you have to do is to add the animation property to the element you want to animate. The animation property includes the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.\n\n## Example\n\n```css\ndiv {\n    width: 100px;\n    height: 100px;\n    background-color: red;\n    animation-name: div-animate;\n    animation-duration: 4s;\n}\n\n@keyframes div-animate {\n    0% {\n        background-color: red;\n        transform: translateX(0px);\n    }\n    50% {\n        background-color: blue;\n        transform: translateX(20px);\n    }\n    100% {\n        background-color: red;\n        transform: translateX(60px)\n    }\n}\n```\n\n## What is the difference between animation and transition?\n\nThe difference between animation and transition is that animation is a change from one set of CSS styles to another. Transition is a change from one CSS style to another.\n\n\n## Author\n\n* [Junior Hirwa](https://github.com/HIRWA13)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhirwa13%2Fcss-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhirwa13%2Fcss-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhirwa13%2Fcss-animation/lists"}