12+ CSS Border Animation Examples

CSS Border Animation Examples
Code Snippet:Simple Animations using CSS Borders
Author: Maninder Pal Singh
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 764
License: MIT
Edit Code online: View on CodePen
Read More

This code showcases 12 CSS border animation examples. It creates various border effects on shapes. Using hover, it triggers dynamic border changes. The code employs CSS animations to create eye-catching effects. It helps learn CSS border animations and transitions.

How to Create CSS Border Animation Examples

1. First of all, load the Normalize CSS and Google Fonts by adding the following CDN links into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">

2. Set up the HTML structure containing a grid of animated boxes. Each box represents a different border animation example.

	<div class="warning">
		This page uses <a href="https://css-tricks.com/snippets/css/complete-guide-grid/" title="CSS Grid Layout" target="_blank">CSS Grid Layout</a>. If you are reading this message, your browser does not support this feature and you may not be able to see a grid of example boxes. You can check the browser compatibility <a href="http://caniuse.com/#feat=css-grid" title="Can I Use CSS Grid Layout" target="_blank">here</a>.
	</div>
	<h1>Simple Animations using CSS Borders</h1>
	<h3>Hover your mouse on the examples below to see the effect.</h3>
	<div class="grid-container">
		<div>
			<h2>1. Interchange border colors</h2>
			<div class="box box1"></div>
		</div>
		<div>
			<h2>2. Expand width</h2>
			<div class="box box2"></div>
		</div>
		<div>
			<h2>3. Expand width &amp; height</h2>
			<div class="box box3"></div>
		</div>
		<div>
			<h2>4. Rotate border colors using keyframe animations</h2>
			<div class="box box4"></div>
		</div>
		<div>
			<h2>5. Four colored circle</h2>
			<div class="box box5"></div>
		</div>
		<div>
			<h2>6. Two colored triangle</h2>
			<div class="box box6"></div>
		</div>
		<div>
			<h2>7. Two colored square</h2>
			<div class="box box7"></div>
		</div>
		<div>
			<h2>8. Missing top border</h2>
			<div class="box box8"></div>
		</div>
		<div>
			<h2>9. Down Arrow</h2>
			<div class="box box9"></div>
		</div>
		<div>
			<h2>10. Left Arrow</h2>
			<div class="box box10"></div>
		</div>
		<div>
			<h2>11. Up Arrow</h2>
			<div class="box box11"></div>
		</div>
		<div>
			<h2>12. Right Arrow</h2>
			<div class="box box12"></div>
		</div>
	</div>

	<footer>
		<a href="https://github.com/mpsinghk/animations-using-css-borders" title="Fork on GitHub" target="_blank">Fork on GitHub</a>
	</footer>

3. The following CSS code defines the animations for each box. It uses classes like .box1, .box2, etc., to target specific elements. Modify the styles for each .box class to change the border effects on hover or focus. Experiment with changing border widths, colors, and shapes to create unique animations.

Explore the keyframes defined for certain animations (@keyframes rotate-borders) to understand how the borders transition.

/* Base
------------------------------------------------------- */
body {
  font-family: 'Quicksand', sans-serif;
  font-size: calc(16px + 0.3vw);
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  padding: 40px 30px 30px;
}

/* Typography
------------------------------------------------------- */
h1 {
  font-size: 3.2em;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 0.3em;
}

h2 {
  font-size: 1.2em;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 0.8em;
}

a,
a:hover,
a:focus {
  text-decoration: none;
  color: #00a7e3;
}

/* Footer
------------------------------------------------------- */
footer {
  font-size: 0.9em;
  padding: 20px;
  margin-top: 50px;
  border-top: 1px solid #ccc;
}

/* CSS Grid Layout
------------------------------------------------------- */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  grid-gap: 20px;
}

.grid-container > div {
  border: 1px solid #ccc;
  padding: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Warning message if using old browser
that does not support CSS Grid Layout.
------------------------------------------------------- */
.warning {
  padding: 20px;
  margin-bottom: 30px;
  background: #f7b563;
  border: 1px solid #e88d1a;
  border-radius: 3px;
}

.warning a {
  color: #fff;
}

@supports (display: grid) {
  .warning {
    display: none;
  }
}

/* Example boxes
------------------------------------------------------- */
.box {
  display: inline-block;
  cursor: pointer;
  width: 100px;
  height: 100px;
  border-width: 35px;
  border-style: solid;
  border-color: cyan magenta yellow black;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.box1:hover,
.box1:focus {
  border-color: yellow black cyan magenta;
}

.box2 {
  width: 0;
}

.box2:hover,
.box2:focus {
  width: 100px;
}

.box3 {
  width: 0;
  height: 0;
}

.box3:hover,
.box3:focus {
  width: 100px;
  height: 100px;
}

@-webkit-keyframes rotate-borders {
  25% { border-color: black cyan magenta yellow; }
  50% { border-color: yellow black cyan magenta; }
  75% { border-color: magenta yellow black cyan; }
  100% { border-color: cyan magenta yellow black; }
}

@keyframes rotate-borders {
  25% { border-color: black cyan magenta yellow; }
  50% { border-color: yellow black cyan magenta; }
  75% { border-color: magenta yellow black cyan; }
  100% { border-color: cyan magenta yellow black; }
}

.box4 {
  -webkit-animation: rotate-borders 6s infinite;
          animation: rotate-borders 6s infinite;
}

.box5:hover,
.box5:focus {
  border-radius: 50%;
}

.box6:hover,
.box6:focus {
  width: 0;
  height: 0;
  border-width: 85px;
  border-color: transparent magenta yellow transparent;
}

.box7:hover,
.box7:focus {
  width: 0;
  height: 0;
  border-width: 0 170px 170px 0;
  border-color: transparent magenta yellow transparent;
}

.box8:hover,
.box8:focus {
  width: 0;
  height: 0;
  border-width: 85px;
  border-color: transparent magenta yellow black;
}

.box9:hover,
.box9:focus {
  width: 0;
  height: 0;
  border-width: 170px 85px 0 85px;
  border-color: cyan transparent transparent transparent;
}

.box10:hover,
.box10:focus {
  width: 0;
  height: 0;
  border-width: 85px 170px 85px 0;
  border-color: transparent magenta transparent transparent;
}

.box11:hover,
.box11:focus {
  width: 0;
  height: 0;
  border-width: 0 85px 170px 85px;
  border-color: transparent transparent yellow transparent;
}

.box12:hover,
.box12:focus {
  width: 0;
  height: 0;
  border-width: 85px 0 85px 170px;
  border-color: transparent transparent transparent black;
}

In the above CSS code, each .box class represents an example with its unique border animation effect. These effects trigger on hover or focus. The .box1, .box2, and so on, classes define individual animations. You can modify these to create your custom effects. Experiment with properties like border-width, border-color, and transitions to create variations.

That’s all! hopefully, you have successfully integrated CSS border animation examples into your project. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X