10+ CSS Border Animation Examples

This post contains a total of 10+ CSS Border Animation Examples with Source Code. All these Border Animations are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Border Animation Examples

1. Gradient Border

Made by zhang xuan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lato:[email protected]&display=swap");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gradient-border {
  --border-width: 3px;
  width: 300px;
  height: 200px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Lato", serif;
  color: white;
  font-size: 46px;
  text-transform: uppercase;
  background: #222;
  border-radius: var(--border-width);
}
.gradient-border::after {
  position: absolute;
  content: "";
  top: calc(-1 * var(--border-width));
  left: calc(-1 * var(--border-width));
  width: calc(100% + var(--border-width) * 2);
  height: calc(100% + var(--border-width) * 2);
  z-index: -1;
  background-image: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
  background-size: 300% 300%;
  background-position: 0 50%;
  border-radius: calc(2 * var(--border-width));
  animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}
</style>
</head>
<body>
  <div class="gradient-border">
  css <br>
  is <br>
  awesome 
</div>
</body>
</html>

2. Button Border Animation (on Hover)

Made by Jesse Dean. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html,
body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body {
  background: #000D16;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-border-animate {
  width: 200px;
  margin: 50px auto;
  position: relative;
  border: 1px solid #9BAEC8;
  height: 45px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.btn-border-animate:hover .hoverBtn:before, .btn-border-animate:hover .hoverBtn:after {
  opacity: 1;
  -webkit-animation: btnBorderX 0.3s;
  /* Chrome, Safari, Opera */
  animation: btnBorderX 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
}
.btn-border-animate:hover .hoverBtn-bottom:before, .btn-border-animate:hover .hoverBtn-bottom:after {
  opacity: 1;
  -webkit-animation: btnBorderZ 0.3s;
  /* Chrome, Safari, Opera */
  animation: btnBorderZ 0.3s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  animation-direction: normal;
}
.btn-border-animate a p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  color: #9BAEC8;
  font-family: Lato, "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.8em;
  line-height: 45px;
}
.btn-border-animate a:hover p {
  color: #48E68B;
}

.hoverBtn {
  width: 100%;
  height: 45px;
  position: absolute;
  top: -1px;
}
.hoverBtn:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2.1px #48E68B;
  border-left: solid 2.1px #48E68B;
  -webkit-border-top-left-radius: 0;
  -moz-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  right: 100px;
}
.hoverBtn:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  border-top: solid 2.1px #48E68B;
  border-right: solid 2.1px #48E68B;
  -webkit-border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  left: 100px;
}

.hoverBtn-bottom {
  width: 100%;
  height: 45px;
  position: absolute;
}
.hoverBtn-bottom:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 45px;
  border-bottom: solid 2.1px #48E68B;
  -webkit-border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
  right: 0;
}
.hoverBtn-bottom:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  display: block;
  opacity: 0;
  height: 45px;
  border-bottom: solid 2.1px #48E68B;
  -webkit-border-top-left-radius: 0;
  -moz-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
  left: 0;
}

@keyframes btnBorderX {
  0% {
    width: 0;
    height: 0;
  }
  50% {
    width: 100px;
    height: 0;
  }
  100% {
    width: 100px;
    height: 45px;
  }
}
@keyframes btnBorderZ {
  0% {
    width: 0px;
  }
  100% {
    width: 100px;
  }
}
</style>
</head>
<body>
  <div class="wrapper">
    
  <div class="btn-border-animate">
  <a href="#">
    <p>Hover over me</p>
    <div class="hoverBtn"></div>
    <div class="hoverBtn-bottom"></div>
  </a>
</div>
</div>
</body>
</html>

3. Border animation

Made by Inderpreet Singh. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
:root {
  font-size: 10px;
  --delay: .5s;
  --timing: 1s;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}
body {
  background: #000;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.box-outer {
  overflow: hidden;
  margin: 5rem auto;
  width: 20rem;
  height: 20rem;
}
.main_box {
  width: 20rem;
  height: 20rem;
  position: relative;
  background: #f34c4c;
  border: 0.5rem solid #000;
}
.bar {
  position: absolute;
  width: 5rem;
  height: 0.5rem;
  background: #fff;
  transition: all var(--timing) linear;
  -webkit-animation-duration: var(--timing);
  animation-duration: var(--timing);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.bar.delay {
  animation-delay: var(--delay);
  -webkit-animation-delay: var(--delay);
}
.top {
  top: -0.5rem;
  left: -0.5rem;
}
.right {
  top: 1.8rem;
  right: -2.8rem;
  transform: rotate(90deg);
}
.bottom {
  bottom: -0.5rem;
  left: -0.5rem;
}
.left {
  top: 1.8rem;
  left: -2.8rem;
  transform: rotate(90deg);
}
@-webkit-keyframes h-move {
  0% {
    left: -0.5rem;
  }
  100% {
    left: 20rem;
  }
}
@keyframes h-move {
  0% {
    left: -0.5rem;
  }
  100% {
    left: 20rem;
  }
}
.top,
.bottom {
  -webkit-animation-name: h-move;
  animation-name: h-move;
}
@-webkit-keyframes v-move {
  0% {
    top: -0.5rem;
  }
  100% {
    top: 22.8rem;
  }
}
@keyframes v-move {
  0% {
    top: -0.5rem;
  }
  100% {
    top: 22.8rem;
  }
}
.right,
.left {
  -webkit-animation-name: v-move;
  animation-name: v-move;
}
</style>
</head>
<body>
  <div class='box-outer'>
  <div class='main_box'>
    <div class='bar top'></div>
    <div class='bar right delay'></div>
    <div class='bar bottom delay'></div>
    <div class='bar left'></div>
  </div>
</div>
</body>
</html>

4. Button Border Animation – CSS Only

Made by Soumyajit Pathak. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500'>
<style>
body {
  color: #259EF5;
  font-family: "Maven Pro", sans-serif;
  height: 100vh;
  align-items: center;
  overflow: hidden;
  display: flex;
}
body h1 {
  margin: auto;
}
body h1 a {
  text-decoration: none;
  color: inherit;
  position: relative;
}
body h1 a:hover {
  color: #259EF5;
}
body h1 a::before, body h1 a::after,
body h1 a span::before,
body h1 a span::after {
  content: "";
  position: absolute;
  background: #259EF5;
  transition: all 0.2s ease-in;
}
body h1 a::before, body h1 a::after {
  height: 2px;
  width: 0;
}
body h1 a::before {
  bottom: 0;
}
body h1 a::after {
  right: 0;
}
body h1 a:hover::after, body h1 a:hover::before {
  width: 100%;
}
body h1 a span::before,
body h1 a span::after {
  width: 2px;
  height: 0;
}
body h1 a span::before {
  bottom: 0;
}
body h1 a span:hover::before,
body h1 a span:hover::after {
  height: 100%;
}
</style>
</head>
<body>
  <h1><a href="#"><span>&nbsp; Hover Me &nbsp;</span></a></h1>
</body>
</html>

5. Rotating border animation background

Made by Maurici Abad. Rotating border animation background in pure CSS with conic gradient. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap" rel="stylesheet">
<style>
/* ---------- Make the codepen look nice ---------- */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background: #eee;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  text-align: center
}

body > div > * {
    margin: 1.25rem 2.5rem;
    box-shadow: 0 0.5rem 0.75rem rgba(0,0,0,0.2);
  }
/* ---------- End make the codepen look nice ---------- */

/* ---------- Begin .rotating-border ---------- */
@-webkit-keyframes spin {
  from {transform: translate(-50%, -50%) rotate(0);}
  to   {transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes spin {
  from {transform: translate(-50%, -50%) rotate(0);}
  to   {transform: translate(-50%, -50%) rotate(360deg);}
}
.rotating-border {
  --border-radius: 1rem;
  --border-size: 0.5rem;
  --border-bg: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  --padding: 1rem;
  
  position: relative;
  overflow: hidden;
  font-size: 2rem;
  padding: calc(var(--padding) + var(--border-size));
  border-radius: var(--border-radius);
  display: inline-block
}
.rotating-border::before {
    content: '';
    display: block;
    background: var(--border-bg);
    width: calc(100% * 1.41421356237);
    padding-bottom: calc(100% * 1.41421356237);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    z-index: -2;
    -webkit-animation: spin 5s linear infinite;
            animation: spin 5s linear infinite;
  }
.rotating-border--reverse::before{
    animation-direction: reverse;
  }
.rotating-border::after{
    content: '';
    position: absolute;
    top: var(--border-size);
    right: var(--border-size);
    bottom: var(--border-size);
    left: var(--border-size);
    background: white;
    z-index: -1;
    border-radius: calc(var(--border-radius) - var(--border-size));
  }
/* ---------- End .rotating-border ---------- */

/* ---------- Begin customizing .rotating-border ---------- */
.rotating-border--google {
  --border-radius: 0.5rem;
  --border-size: 0.25rem;
  --border-bg: conic-gradient(
    #ea4335 0.0turn, #ea4335 0.125turn, 
    #4285f4 0.125turn, #4285f4 0.25turn, 
    #fbbc05 0.25turn, #fbbc05 0.375turn, 
    #34a853 0.375turn, #34a853 0.5turn, 
    #ea4335 0.5turn, #ea4335 0.625turn, 
    #4285f4 0.625turn, #4285f4 0.75turn, 
    #fbbc05 0.75turn, #fbbc05 0.875turn, 
    #34a853 0.875turn, #34a853 1.0turn
  );
  --border-bg: conic-gradient(
    #ea4335 0.0turn 0.125turn, 
    #4285f4 0.125turn 0.25turn, 
    #fbbc05 0.25turn 0.375turn, 
    #34a853 0.375turn 0.5turn, 
    #ea4335 0.5turn 0.625turn, 
    #4285f4 0.625turn 0.75turn, 
    #fbbc05 0.75turn 0.875turn, 
    #34a853 0.875turn 1.0turn
  );
  
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 2;
}
.rotating-border--rainbow{
  --border-radius: 1.5rem;
  --border-size: 0.5rem;
  --border-bg: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}
.rotating-border--black-white{
  --border-radius: 100%;
  --border-size: 0.6rem;
  --border-bg: conic-gradient(
    #fff 0.00turn, #fff 0.05turn, 
    #333 0.05turn, #333 0.10turn, 
    #fff 0.10turn, #fff 0.15turn, 
    #333 0.15turn, #333 0.20turn, 
    #fff 0.20turn, #fff 0.25turn, 
    #333 0.25turn, #333 0.30turn, 
    #fff 0.30turn, #fff 0.35turn, 
    #333 0.35turn, #333 0.40turn, 
    #fff 0.40turn, #fff 0.45turn, 
    #333 0.45turn, #333 0.50turn, 
    #fff 0.50turn, #fff 0.55turn, 
    #333 0.55turn, #333 0.60turn, 
    #fff 0.60turn, #fff 0.65turn, 
    #333 0.65turn, #333 0.70turn, 
    #fff 0.70turn, #fff 0.75turn, 
    #333 0.75turn, #333 0.80turn, 
    #fff 0.80turn, #fff 0.85turn, 
    #333 0.85turn, #333 0.90turn, 
    #fff 0.90turn, #fff 0.95turn,
    #333 0.95turn, #333 1.00turn
  );
  --border-bg: conic-gradient(
    #fff 0.00turn 0.05turn, 
    #333 0.05turn 0.10turn, 
    #fff 0.10turn 0.15turn, 
    #333 0.15turn 0.20turn, 
    #fff 0.20turn 0.25turn, 
    #333 0.25turn 0.30turn, 
    #fff 0.30turn 0.35turn, 
    #333 0.35turn 0.40turn, 
    #fff 0.40turn 0.45turn, 
    #333 0.45turn 0.50turn, 
    #fff 0.50turn 0.55turn, 
    #333 0.55turn 0.60turn, 
    #fff 0.60turn 0.65turn, 
    #333 0.65turn 0.70turn, 
    #fff 0.70turn 0.75turn, 
    #333 0.75turn 0.80turn, 
    #fff 0.80turn 0.85turn, 
    #333 0.85turn 0.90turn, 
    #fff 0.90turn 0.95turn,
    #333 0.95turn 1.00turn
  );
}
.rotating-border--black-yellow{
  --border-radius: 100%;
  --border-bg: conic-gradient(
    #F0C400 0.1666turn, 
    #444 0.1666turn, #444 0.3333turn, 
    #F0C400 0.3333turn, #F0C400 0.5turn, 
    #444 0.5turn, #444 0.6666turn, 
    #F0C400 0.6666turn, #F0C400 0.8333turn, 
    #444 0.8333turn
  );
  --border-bg: conic-gradient(
    #F0C400 0.1666turn, 
    #444 0.1666turn 0.3333turn, 
    #F0C400 0.3333turn 0.5turn, 
    #444 0.5turn 0.6666turn, 
    #F0C400 0.6666turn 0.8333turn, 
    #444 0.8333turn
  );
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
}
/* ---------- End customizing .rotating-border ---------- */
</style>
</head>
<body>
  <div>
  <div class="rotating-border rotating-border--google">
    Rotating<br>border<br>animation
  </div>
  <br>
  <div class="rotating-border rotating-border--black-white  rotating-border--reverse">๐Ÿ</div>
    <div class="rotating-border rotating-border--rainbow">๐ŸŒˆ</div>
  <div class="rotating-border rotating-border--black-yellow">๐Ÿ’ก</div>
</div>
</body>
</html>

6. Gradient border CSS

Made by Grunkle Stan. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@font-face {
  font-family: 'Signika Negative';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/signikanegative/v19/E21x_cfngu7HiRpPX3ZpNE4kY5zKSPmJXkF0VDD2RAqnS43rvdw.ttf) format('truetype');
}
@font-face {
  font-family: 'Signika Negative';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/signikanegative/v19/E21x_cfngu7HiRpPX3ZpNE4kY5zKSPmJXkF0VDD2RAp5TI3rvdw.ttf) format('truetype');
}
@font-face {
  font-family: 'Signika Negative';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/signikanegative/v19/E21x_cfngu7HiRpPX3ZpNE4kY5zKSPmJXkF0VDD2RApATI3rvdw.ttf) format('truetype');
}
body {
  margin: 0;
  background: #2b2f3c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  font-family: 'Signika Negative', sans-serif;
}
body h1 {
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  font-size: 3em;
  letter-spacing: 0.05em;
  margin-bottom: 1em;
}
body .container {
  text-align: center;
}
body .container a {
  display: inline-block;
  margin: 20px;
  color: #fff;
  line-height: 1.4em;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.9em 3.5em;
  border: 0.18em solid transparent;
  background: #2b2f3c;
  border-radius: 3.5em;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
body .container a:before {
  content: "";
  display: block;
  border-radius: 3.5em;
  position: absolute;
  background: inherit;
  top: 0.2em;
  left: 0.2em;
  right: 0.2em;
  bottom: 0.2em;
  z-index: -1;
}
body .container a:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -2;
  transform: rotate(0deg);
  animation: gradient 2s ease alternate infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
body .container a:hover:after {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
body .container a:nth-child(1):after {
  background: #33cbeb;
  background: -moz-linear-gradient(left, #33cbeb 0%, #28d662 30%, #f07739 70%, #e3366b 100%);
  background: -webkit-linear-gradient(left, #33cbeb 0%, #28d662 30%, #f07739 70%, #e3366b 100%);
  background: linear-gradient(to right, #33cbeb 0%, #28d662 30%, #f07739 70%, #e3366b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33cbeb', endColorstr='#e3366b', GradientType=1);
  background-size: 300% 300%;
}
body .container a:nth-child(2):after {
  background: #6086c1;
  background: -moz-linear-gradient(45deg, #6086c1 0%, #efe097 70%, #d66466 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #6086c1), color-stop(70%, #efe097), color-stop(100%, #d66466));
  background: -webkit-linear-gradient(45deg, #6086c1 0%, #efe097 70%, #d66466 100%);
  background: -o-linear-gradient(45deg, #6086c1 0%, #efe097 70%, #d66466 100%);
  background: -ms-linear-gradient(45deg, #6086c1 0%, #efe097 70%, #d66466 100%);
  background: linear-gradient(45deg, #6086c1 0%, #efe097 70%, #d66466 100%);
  background-size: 300% 300%;
}
body .container a:nth-child(3):after {
  background: #e636c4;
  background: -moz-linear-gradient(left, #e636c4 0%, #3fcea5 48%, #50408b 96%);
  background: -webkit-linear-gradient(left, #e636c4 0%, #3fcea5 48%, #50408b 96%);
  background: linear-gradient(to right, #e636c4 0%, #3fcea5 48%, #50408b 96%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e636c4', endColorstr='#50408b', GradientType=1);
  background-size: 300% 300%;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 95% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 95% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
</head>
<body>
  <main>
		<h1>Gradient border animation</h1>
		<div class="container">
			<a href="#">Example 1</a>
			<a href="#">Example 2</a>
			<a href="#">Example 3</a>
		</div>
	</main>
</body>
</html>

7. CSS Dashed border animation

Made by Preethi Sam. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
<style>
.animation-examples {
  width: 600px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: cambria;
}

.animation-examples.one {
  color: #69D2E7;
  outline: 10px dashed #E0E4CC;
  box-shadow: 0 0 0 10px #69D2E7;
  animation: 1s animateBorderOne ease infinite;
}

@keyframes animateBorderOne {
  to {
    outline-color: #69D2E7;
    box-shadow: 0 0 0 10px #E0E4CC;
  }
}

.animation-examples.two {
  color: #FA2A00;
  outline: 10px dashed #F2D694;
  box-shadow: 0 0 0 10px #FA2A00;
  animation: 2s animateBorderTwo ease infinite;
}

@keyframes animateBorderTwo {
  to {
    outline-color: #FA2A00;
    box-shadow: 0 0 0 10px #F2D694;
  }
}

.animation-examples.three {
  color: #BEF202;
  background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);
  background-size: auto 2px;
  outline: 10px dashed #BEF202;
  box-shadow: 0 0 0 10px #1B676B;
  animation: 1s animateBorderThree ease infinite;
}

@keyframes animateBorderThree {
  to {
    outline-color: #1B676B;
    box-shadow: 0 0 0 10px #BEF202;
  }
}

#animation-examples{
  margin: 20px 10px;
}
</style>
</head>
<body>
  <div id="animation-examples">
  <div class="animation-examples one">
    Sample Text
  </div>
  <br />
  <br />
  <div class="animation-examples two">Sample Text</div>
  <br />
  <br />
  <div class="animation-examples three">Sample Text</div>
</div>
</body>
</html>

8. Loading Animation

Made by Simon Goellner. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@font-face {
  font-family: 'The Girl Next Door';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/thegirlnextdoor/v18/pe0zMJCIMIsBjFxqYBIcZ6_OI5oFHCY4ULF_.ttf) format('truetype');
}
.wrapper {
  padding: 30px;
}
aside {
  margin: auto;
  width: 200px;
}
.loading {
  font-family: 'The Girl Next Door', cursive;
  font-size: 26px;
  padding: 3px;
  background-size: 130%;
  -webkit-filter: hue-rotate(10deg);
  height: 50px;
  line-height: 46px;
  color: white;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) inset;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  position: relative;
}
.text,
.border {
  z-index: 5;
  border-radius: 10px;
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  right: 4px;
  display: block;
}
.text {
  top: 7px;
}
.border {
  border: 2px dashed #ffffff;
  clip: rect(0, 0, 0, 0);
  animation: maskBorder 1.4s infinite;
}
@keyframes maskBorder {
  0% {
    clip: rect(0, 50px, 10px, 0);
  }
  20% {
    clip: rect(0, 200px, 10px, 0);
  }
  35% {
    clip: rect(0, 200px, 10px, 190px);
  }
  50% {
    clip: rect(10px, 200px, 50px, 190px);
  }
  60% {
    clip: rect(40px, 200px, 50px, 190px);
  }
  70% {
    clip: rect(40px, 200px, 50px, 0px);
  }
  85% {
    clip: rect(40px, 10px, 50px, 0px);
  }
  90% {
    clip: rect(0, 10px, 50px, 0px);
  }
  100% {
    clip: rect(0, 10px, 10px, 0px);
  }
}
body {
  background: #bbddee;
  background: radial-gradient(ellipse cover, #fff 0%, #bbddee 100%);
  padding: 50px 100px;
  height: 500px;
}
.loading {
  background: pink url('https://i.ibb.co/pj82HPN/download-5.jpg') no-repeat center center;
}
</style>
</head>
<body>
  <div class="wrapper">
  <aside class="loading">
    <span class="text">Loading</span>
    <span class="border"></span>
  </aside>
</div>
</body>
</html>

9. Border Animation without svg

Made by Rplus. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
.bb::before, .bb::after, .bb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  width: 200px;
  height: 200px;
  margin: auto;
  background: url("//blog.codepen.io/wp-content/uploads/2012/06/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  color: #69ca62;
  box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.bb::before, .bb::after {
  content: "";
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 2px;
  animation: clipMe 8s linear infinite;
}
.bb::before {
  animation-delay: -4s;
}
.bb:hover::after, .bb:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
}

@keyframes clipMe {
  0%, 100% {
    clip: rect(0px, 220px, 2px, 0px);
  }
  25% {
    clip: rect(0px, 2px, 220px, 0px);
  }
  50% {
    clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
    clip: rect(0px, 220px, 220px, 218px);
  }
}
html,
body {
  height: 100%;
}

body {
  position: relative;
  background-color: #0f222b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
</style>
</head>
<body>
  <div class="bb"></div>
</body>
</html>

10. Framed Border Animation

Made by Chance Squires. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
  width: 150px;
  height: 50px;
  border: 1px solid #333;
  font-family: 'Cinzel', serif;
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  transition: 1s;
}

.btn::before, .btn::after {
  position: absolute;
  background: #eee;
  z-index: -1;
  transition: 1s;
  content: '';
}

.btn::before {
  height: 50px;
  width: 130px;
}

.btn::after {
  width: 150px;
  height: 30px;
}

.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.btn:hover::before {
  width: 0px;
  background: #fff;
}

.btn:hover::after {
  height: 0px;
  background: #fff;
}

.btn:hover {
  background: #fff;
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
<div class="btn">
  <span class="noselect">Framed</span>
</div>
</body>
</html>

11. SVG Ellipse Border Animation

Made by Corey Bullman. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300);
body {
  align-items: center;
  background: #222;
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
}

.svg-container {
  height: 124px;
  position: relative;
  width: 124px;
}
.svg-container h1 {
  color: #aaa;
  font-family: "Source Sans Pro";
  font-size: 1.2rem;
  left: 50%;
  letter-spacing: 4px;
  position: absolute;
  text-align: center;
  top: -60px;
  transform: translateX(-50%);
  width: 100%;
}

.circle {
  height: 124px;
  width: 124px;
}
.circle .background {
  fill: transparent;
  stroke: #1abc9c;
  transition: all 200ms ease;
}
.circle .foreground {
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  stroke: #EE3769;
  transform-origin: 50% 50%;
  transform: rotate(-270deg);
  transition: all 800ms ease;
}
.circle .line {
  stroke-width: 2;
  stroke: #1abc9c;
  transform-origin: 50% 50%;
  transition: all 500ms ease;
}
.circle .line2 {
  transform: rotate(-90deg);
}
.circle:hover {
  cursor: pointer;
}
.circle:hover .background {
  stroke: transparent;
}
.circle:hover .foreground {
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
}
.circle:hover .line {
  stroke: #EE3769;
}
.circle:hover .line {
  transform: rotate(180deg);
}
.circle:hover .line2 {
  transform: rotate(0);
}
</style>
</head>
<body>
  <section class="svg-container">
  <h1>Hover me</h1>
  
  <svg class="circle" xmlns="http://www.w3.org/2000/svg">
    <g>
      <ellipse class="background" ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="2"/>
      <ellipse class="foreground" ry="60" rx="60" cy="62.5" cx="62.5" stroke-width="2"/>
      <line class="line line1" x1="52" y1="62" x2="74" y2="62" />
      <line class="line line2" x1="52" y1="62" x2="74" y2="62" />
    </g>
  </svg>
</section>
</body>
</html>