Animated Borders In Pure CSS – animated-border.css

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


Animated Borders In Pure CSS – animated-border.css


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 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

See also  Fancy Accordion Slider With Pure CSS

Leave a Reply

Your email address will not be published. Required fields are marked *