{"id":45211355,"url":"https://github.com/rod/animations.css","last_synced_at":"2026-02-20T16:32:09.553Z","repository":{"id":58239769,"uuid":"73753537","full_name":"rod/animations.css","owner":"rod","description":"CSS3 Animation Cheat Sheet","archived":false,"fork":false,"pushed_at":"2017-02-17T13:40:28.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-02-09T19:59:55.350Z","etag":null,"topics":["animation","css"],"latest_commit_sha":null,"homepage":"http://www.justinaguilar.com/animations/","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/rod.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}},"created_at":"2016-11-14T22:42:55.000Z","updated_at":"2017-09-07T09:17:54.000Z","dependencies_parsed_at":"2022-08-31T00:40:28.746Z","dependency_job_id":null,"html_url":"https://github.com/rod/animations.css","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/rod/animations.css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rod%2Fanimations.css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rod%2Fanimations.css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rod%2Fanimations.css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rod%2Fanimations.css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rod","download_url":"https://codeload.github.com/rod/animations.css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rod%2Fanimations.css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29656958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-20T09:27:29.698Z","status":"ssl_error","status_checked_at":"2026-02-20T09:26:12.373Z","response_time":59,"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":["animation","css"],"created_at":"2026-02-20T16:32:08.906Z","updated_at":"2026-02-20T16:32:09.545Z","avatar_url":"https://github.com/rod.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# animations.css [![Travis](https://img.shields.io/travis/rod/animations.css.svg)]()\n\n\u003e CSS3 Animation Cheat Sheet\n\n## Installation\n\nInstall via Bower\n\n```bash\nbower install --save-dev animations.css\n```\n\nInstall via npm\n\n```bash\nnpm install --save-dev animations.css\n```\n\nInstall via yarn\n\n```bash\nyarn add --dev animations.css\n```\n\n## Basic Usage\n\nAdd the stylesheet to the `\u003chead\u003e` element\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"animations.css\"\u003e\n\u003c/head\u003e\n```\n\nAdd one of the following animation classes to the element that you want to animate:\n\n- entrance\n  - `slideUp`, `slideDown`, `slideLeft`, `slideRight`, `slideExpand`, `expandUp`, `fadeIn`, `expandOpen`, `bigEntrance`, `hatch`\n\n- misc\n  - `bounce`, `pulse`, `floating`, `tossing`, `pullUp`, `pullDown`, `stretchLeft`, `stretchRight`\n\nFor example:\n\n```html\n\u003cdiv class=\"bounce\"\u003e\n  ...\n\u003c/div\u003e\n```\n\nWhen using entrance animations, you need to apply a `visibility: hidden` property to the animated element to hide it before the animation is activated.\n\nThe values for these animations are relative to the element's size. That means bigger images have more exaggerated animations and smaller images have more subtle animations.\n\n## Usage\n\nBy default, these animations will trigger on page load, which means animations further down the page may not be seen. Luckily, there are many ways you can [activate the animations on scroll](http://www.justinaguilar.com/animations/scrolling.html).\n\nTo apply the `slideUp` animation to an element with an id of `myElement` when it is `400px` from the top of the browser window you could use the following:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\"\u003e\n  $(window).scroll(function() {\n    $('#myElement').each(function(){\n    var elementPosition = $(this).offset().top;\n    var topOfWindow = $(window).scrollTop();\n      if (elementPosition \u003c topOfWindow + 400) {\n        $(this).addClass(\"slideUp\");\n      }\n    });\n  });\n\u003c/script\u003e\n```\n\nTo make `#myElement` `bounce` when clicked you could use the following:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  $('#myElement').click(function() {\n    $(this).addClass(\"bounce\");\n  });\n\u003c/script\u003e\n```\n\n## License\nMIT © [Rodney Dennis](https://github.com/rod)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frod%2Fanimations.css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frod%2Fanimations.css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frod%2Fanimations.css/lists"}