Animated Borders In Pure CSS – animated-border.css

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>