Animated Borders In Pure CSS – animated-border.css

Category: Animation , CSS & CSS3 , Recommended | October 30, 2017
Author: code-fx
Views Total: 2,901
Official Page: Go to website
Last Update: October 30, 2017
License: MIT

Preview:

Animated Borders In Pure CSS – animated-border.css

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>

You Might Be Interested In:


Leave a Reply