Author: | code-fx |
---|---|
Views Total: | 5,652 views |
Official Page: | Go to website |
Last Update: | October 30, 2017 |
License: | MIT |
Preview:

Description:
animated-border.css is a pure CSS library which applies fancy animations to borders of your elements using pure CSS/CSS3.
How to use it:
Install it with NPM:
# NPM $ npm install pure-css3-animated-border --save
Include the CSS file animated-border.min.css
on the html page.
<link href="animated-border.css" rel="stylesheet">
Add an animation CSS of your choice to your element and done. All possible CSS classes:
- .ui-box .topBottom-leftRightCorner
- .ui-box .topBottom-rightLeftCorner
- .ui-box .forwardBorderTrain
- .ui-box .backwardBorderTrain
- .ui-box .border-inOutSpread
- .ui-box .slideOpposite
- .ui-box .top-leftToRight
- .ui-box .right-topToBottom
- .ui-box .bottom-rightToLeft
- .ui-box .left-bottomToTop
- .ui-box .top-rightToLeft
- .ui-box .right-bottomToTop
- .ui-box .bottom-leftToRight
- .ui-box .left-topToBottom
- .ui-box .top-inOutSpread
- .ui-box .right-inOutSpread
- .ui-box .bottom-inOutSpread
- .ui-box .left-inOutSpread
- .ui-box .top-slideOpposite
- .ui-box .right-slideOpposite
- .ui-box .bottom-slideOpposite
- .ui-box .left-slideOpposite
- .ui-box .top-leftStart
- .ui-box .top-rightStart
- .ui-box .bottom-rightStart
- .ui-box .bottom-leftStart
- .ui-box .top-leftStart-backward
- .ui-box .top-rightStart-backward
- .ui-box .bottom-rightStart-backward
- .ui-box .bottom-leftStart-backward
- .ui-box .top-leftStart-burst
- .ui-box .top-rightStart-burst
- .ui-box .bottom-rightStart-burst
- .ui-box .bottom-leftStart-burst
- .ui-box .top-leftStart-burst-backward
- .ui-box .top-rightStart-burst-backward
- .ui-box .bottom-rightStart-burst-backward
- .ui-box .bottom-leftStart-burst-backward
- .ui-box .top-stay
- .ui-box .right-stay
- .ui-box .bottom-stay
- .ui-box .left-stay
<a href="#" class="ui-box bottom-leftToRight"> Online Demo </a>