{"id":15489372,"url":"https://github.com/pavliukpetro/motion-css","last_synced_at":"2025-10-26T22:17:40.586Z","repository":{"id":29324953,"uuid":"32858512","full_name":"pavliukpetro/motion-css","owner":"pavliukpetro","description":"The library of CSS3 animation","archived":false,"fork":false,"pushed_at":"2022-12-10T18:55:15.000Z","size":459,"stargazers_count":90,"open_issues_count":5,"forks_count":27,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-08-22T12:36:46.669Z","etag":null,"topics":["animation","css","css3-animations","motion-css"],"latest_commit_sha":null,"homepage":"http://pavliukpetro.github.io/motion-css/","language":"CSS","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/pavliukpetro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"custom":null}},"created_at":"2015-03-25T10:45:00.000Z","updated_at":"2024-11-07T23:53:56.000Z","dependencies_parsed_at":"2023-01-14T14:40:31.924Z","dependency_job_id":null,"html_url":"https://github.com/pavliukpetro/motion-css","commit_stats":null,"previous_names":["pavlyukpetr/motion-css"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pavliukpetro/motion-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavliukpetro%2Fmotion-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavliukpetro%2Fmotion-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavliukpetro%2Fmotion-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavliukpetro%2Fmotion-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pavliukpetro","download_url":"https://codeload.github.com/pavliukpetro/motion-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavliukpetro%2Fmotion-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281180704,"owners_count":26456973,"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-10-26T02:00:06.575Z","response_time":61,"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":["animation","css","css3-animations","motion-css"],"created_at":"2024-10-02T07:05:13.306Z","updated_at":"2025-10-26T22:17:40.554Z","avatar_url":"https://github.com/pavliukpetro.png","language":"CSS","readme":"# motion-css\nThe library of CSS3 animation\n\n![GitHub file size in bytes](https://img.shields.io/github/size/pavlyukpetr/motion-css/motion.min.css?color=success\u0026label=css%20file%20size)\n[![GitHub issues](https://img.shields.io/github/issues/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/issues)\n[![GitHub forks](https://img.shields.io/github/forks/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/network)\n[![GitHub stars](https://img.shields.io/github/stars/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/stargazers)\n[![GitHub license](https://img.shields.io/github/license/pavlyukpetr/motion-css)](https://github.com/pavlyukpetr/motion-css/blob/master/LICENSE)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/pavlyukpetr/motion-css?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2Fpavlyukpetr%2Fmotion-css)\n\n\u003cb\u003eMotion CSS\u003c/b\u003e is a library of animation for your web projects. It works very simply.\nAll you need to do is connect the css file and use a specific class to an element that should be animated.\u003c/p\u003e\n\u003cp\u003eThe complete list of classes, see \u003ca href=\"http://pavliukpetro.github.io/motion-css/\"\u003ehere\u003c/a\u003e and here is some \u003ca href=\"http://pavliukpetro.github.io/motion-css/example.html\"\u003eexample\u003c/a\u003e.\n\t\n## Install with NPM\n\n\u003cpre\u003e\u003ccode\u003enpm install npm i motion-css-animation\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eAfter that you can import it into your style file with:\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-source-css\"\u003e\u003cpre\u003e\u003cspan class=\"pl-k\"\u003e@import\u003c/span\u003e \u003cspan class=\"pl-s\"\u003e\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003enode_modules/motion-css-animation/main\u003cspan class=\"pl-pds\"\u003e'\u003c/span\u003e\u003c/span\u003e;\u003c/pre\u003e\u003c/div\u003e\n\n## USE\n\n\u003cp\u003eConnect stylesheet in \u0026lt;head\u0026gt; tag on your site:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\u0026lt;link rel=\"stylesheet\" href=\u003cspan style=\"color:#E93838\"\u003e\"motion.min.css\"\u003c/span\u003e\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eAdd class \"animation\" to an element that should be animated. Now select the kind of animation for your item and add the appropriate class. \nThe name of the animation is the class that you have to add.\nFor example, I want to add animation appearance to the left. It is called \"fade-in-left\". Here's how it will look my element:\n\u003c/p\u003e\n\u003cdiv class=\"highlight highlight-html\"\u003e\u003cpre\u003e\u003ccode\u003e\u0026lt;div \u003cspan style=\"color:#FFCE53;\"\u003eclass\u003c/span\u003e=\u003cspan style=\"color:#E93838\"\u003e\"animation fade-in-left\"\u003c/span\u003e\u0026gt;...\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\n\n\u003cp\u003eAs you may have guessed, I added a class=\"animation fade-in-left\".\u003c/p\u003e\n\n## ADDITIONAL FEATURES\n\n\u003cp\u003eIf you want to delay the animation, use one of the classes:\u003c/p\u003e\n\n\u003cp\u003e\"delay-05s\" - 0.5 sec delay,\u003cbr\u003e \n\"delay-1s\" - 1 sec delay,\u003cbr\u003e \n\"delay-1-5s\" - 1.5 second delay,\u003cbr\u003e \n\"delay-2s\" - 2 seconds delay,\u003cbr\u003e \n\"delay-3s\" - 3 seconds delay\u003c/p\u003e\n\n\u003cp\u003eor add your own\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\n\u003cspan style=\"color:#E93838\"\u003e.delay-Xs\u003c/span\u003e\n{\n    \u003cspan style=\"color:#D9843E\"\u003e-webkit-animation-delay: Xs! important;\u003cbr\u003e\n    animation-delay: Xs! important;\u003c/span\u003e\n}\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eFor endlessly repeating of animation use class \"replay\".\u003c/p\u003e\n\n\u003cp\u003eYou can also combine this library with the jQuery, to fully control the animation on the site. For example, you can add the animation class to the element, \nwhen it appears in the visible area of the screen.\u003c/p\u003e\n\n\u003cp\u003eTo do this, place the following code before the tag \u0026lt;/body\u0026gt;:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode\u003e\n\u0026lt;script\u0026gt;\n\t$ (window) .scroll (function () {\n\t$ (\u003cspan style=\"color:#48BD82\"\u003e'#elementId'\u003c/span\u003e). each (function () {\n\tvar elPosition = $ (this) .offset (). top; \t// Position of the element\n\tvar elHeight = $ (this) .height (); \t\t// Height of the element\n\tvar windowTop = $ (window) .scrollTop (); \t// Top of the window\n\tvar windowHeight = $ (window) .height (); \t// Height of the window\n\tif (elPosition \u003c windowTop + windowHeight - elHeight) {\n\t\t$ (This) .addClass (\u003cspan style=\"color:#E93838\"\u003e\"animation fade-in\"\u003c/span\u003e);\n\t} \t\t\t\t\t\t                   // adds the class wheh the element is fully in the visible area of the window\n\tif (elPosition \u003e windowTop + windowHeight) {\n\t\t$ (This) .removeClass (\u003cspan style=\"color:#E93838\"\u003e\"animation fade-in\"\u003c/span\u003e);\n\t} \t\t\t\t\t\t                   // removes the class when the element is not visible in the window\n\tif (elPosition + elHeight \u003c windowTop) {\n\t\t$ (This) .removeClass (\u003cspan style=\"color:#E93838\"\u003e\"animation fade-in\"\u003c/span\u003e);\n\t} \t\t\t\t\t\t                   // removes the class when the element is not visible in the window\n\t});\n\t});\n\u0026lt;/script\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eInstead #elementId enter the ID or class of your element. Also replace the class \"fade-in\" to your animation class.\u003c/p\u003e\n\n\u003cp\u003eRemember that for all kinds of entrance animation you need to add to your item id=\"animation\" or css rule \"visibility: hidden;\". \nIn turn, the class \"animation\" then makes your item is visible. \nAdding class \"animation\" necessarily to any animation, because it contains \"animation-fill-mode: both\", \nwhich prohibit return your item to its original position after the end of the animation.\u003c/p\u003e\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavliukpetro%2Fmotion-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpavliukpetro%2Fmotion-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavliukpetro%2Fmotion-css/lists"}