{"id":15047065,"url":"https://github.com/code-fx/pure-css3-animated-border","last_synced_at":"2025-04-10T00:50:32.592Z","repository":{"id":178372485,"uuid":"108675475","full_name":"code-fx/Pure-CSS3-Animated-Border","owner":"code-fx","description":"Pure CSS3 animated border for all html element.","archived":false,"fork":false,"pushed_at":"2020-10-01T13:23:53.000Z","size":76,"stargazers_count":78,"open_issues_count":1,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-05-12T09:20:35.753Z","etag":null,"topics":["cdn","css","css-animations","css3","cssbuttons","html","html-css","html5","plugin","ui","ui-components","ui-design","widget"],"latest_commit_sha":null,"homepage":"https://code-fx.github.io/Pure-CSS3-Animated-Border/","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/code-fx.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}},"created_at":"2017-10-28T18:52:35.000Z","updated_at":"2024-04-17T04:35:01.000Z","dependencies_parsed_at":"2024-01-13T03:45:45.981Z","dependency_job_id":"be32c618-a5d1-42cc-8ff9-e61faf6c88ce","html_url":"https://github.com/code-fx/Pure-CSS3-Animated-Border","commit_stats":null,"previous_names":["code-fx/pure-css3-animated-border"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-fx%2FPure-CSS3-Animated-Border","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-fx%2FPure-CSS3-Animated-Border/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-fx%2FPure-CSS3-Animated-Border/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/code-fx%2FPure-CSS3-Animated-Border/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/code-fx","download_url":"https://codeload.github.com/code-fx/Pure-CSS3-Animated-Border/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137997,"owners_count":21053775,"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":["cdn","css","css-animations","css3","cssbuttons","html","html-css","html5","plugin","ui","ui-components","ui-design","widget"],"created_at":"2024-09-24T20:54:06.369Z","updated_at":"2025-04-10T00:50:32.572Z","avatar_url":"https://github.com/code-fx.png","language":"CSS","funding_links":["https://www.paypal.me/codefx"],"categories":[],"sub_categories":[],"readme":"# pure-css-animated-border\n\nA pure css3 animated border which supports all moden browser.\n\n## CDN Link\n```\nhttps://cdn.jsdelivr.net/gh/code-fx/Pure-CSS3-Animated-Border@V1.0/css/animated-border/animated-border.min.css\n```\n\n## NPM\n```\nnpm i pure-css3-animated-border\n```\n\n## Demo Link\n\nSee the [online demo](https://code-fx.github.io/Pure-CSS3-Animated-Border/).\n\n\u003ca target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/LVbzkQ4E34baRc6UroXqDynU/code-fx/Pure-CSS3-Animated-Border'\u003e\nSponsered By Codesponsor\n\u003c/a\u003e\n\n## 1,2 Line Animated Boder Examples\n\n```\n\n\u003ca href=\"ui-box top-leftToRight\"\u003e\n  Animated Hyperlink Border\n\u003c/a\u003e\n\n\u003cdiv class=\"ui-box bottom-rightToLeft\"\u003e\n  Animated Div Border\n\u003c/a\u003e\n\n\u003cbutton class=\"ui-box left-bottomToTop\"\u003e\n  Animated Button Border\n\u003c/button\u003e\n\n\u003cp class=\"ui-box right-topToBottom\"\u003e\n  Animated Paragraph Border\n\u003c/p\u003e\n\n```\n\n```\nModify border style, color, width and easing\n\u003cstyle\u003e\n  //top border\n  .top-leftToRight:before{\n    border-top: 1px solid Tomato;\n    transition-timing-function: linear;\n  }\n\n  //bottom border\n  .bottom-rightToLeft:after{\n    border-bottom: 1px solid DodgerBlue;\n    transition-timing-function: ease-in;\n  }\n\n  //left border\n  .left-bottomToTop:before{\n    border-left: 1px solid smokeWhite;\n    transition-timing-function: ease-out;\n  }\n\n  //right border\n  .right-topToBottom:after{\n     border-right: 1px solid MediumSeaGreen;\n     transition-timing-function: ease-in-out;\n  }\n\u003c/style\u003e\n```\n\n\n## 4 Line Animated Boder Example\n```\n\u003ca href=\"ui-box top-leftStart\"\u003e\n  \u003cspan class='ui-border-element'\u003e\n    Animated Hyperlink\n  \u003c/span\u003e\n\u003c/a\u003e\n```\n\n```\nModify border style, color, width and easing\n\u003cstyle\u003e\n  //top border\n  .top-leftStart:before{\n    border-top: 1px solid Tomato;\n    transition-timing-function: linear;\n  }\n\n  //bottom border\n  .top-leftStart:after{\n    border-bottom: 1px solid DodgerBlue;\n    transition-timing-function: ease-in;\n  }\n\n  //left border\n  .top-leftStart .ui-border-element:before{\n    border-left: 1px solid smokeWhite;\n    transition-timing-function: ease-out;\n  }\n\n  //right border\n  .top-leftStart .ui-border-element:after{\n     border-right: 1px solid MediumSeaGreen;\n     transition-timing-function: ease-in-out;\n  }\n\u003c/style\u003e\n```\n\n## Animated Border Class Name\n\n| Class Name       | Use Span |\n| ---------------- |-------------|\n| .ui-box .topBottom-leftRightCorner     | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .topBottom-rightLeftCorner      |  ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e```  |\n| .ui-box .forwardBorderTrain | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .backwardBorderTrain | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .border-inOutSpread | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .slideOpposite | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-leftToRight |  |\n| .ui-box .right-topToBottom |  |\n| .ui-box .bottom-rightToLeft |  |\n| .ui-box .left-bottomToTop |  |\n| .ui-box .top-rightToLeft |  |\n| .ui-box .right-bottomToTop |  |\n| .ui-box .bottom-leftToRight |  |\n| .ui-box .left-topToBottom |  |\n| .ui-box .top-inOutSpread |  |\n| .ui-box .right-inOutSpread |  |\n| .ui-box .bottom-inOutSpread |  |\n| .ui-box .left-inOutSpread |  |\n| .ui-box .top-slideOpposite |  |\n| .ui-box .right-slideOpposite |  |\n| .ui-box .bottom-slideOpposite |  |\n| .ui-box .left-slideOpposite |  |\n| .ui-box .top-leftStart | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-rightStart | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-rightStart | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-leftStart | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-leftStart-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-rightStart-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-rightStart-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-leftStart-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-leftStart-burst | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-rightStart-burst | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-rightStart-burst | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-leftStart-burst | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-leftStart-burst-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-rightStart-burst-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-rightStart-burst-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-leftStart-burst-backward | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .top-stay | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .right-stay | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .bottom-stay | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n| .ui-box .left-stay | ```\u003cspan class='ui-border-element'\u003e Your Content... \u003c/span\u003e``` |\n\n## Donate Link\n\n[Donate Now](https://www.paypal.me/codefx).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-fx%2Fpure-css3-animated-border","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcode-fx%2Fpure-css3-animated-border","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcode-fx%2Fpure-css3-animated-border/lists"}