SCSS Arrow Animation

In this example below you will see how to do a SCSS Arrow Animation with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by z-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright z- ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SCSS Arrow Animation</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  background-color: #e25454;
}
body .arrows {
  position: relative;
  /**/
  position: absolute;
  top: 50%;
  left: 50%;
  /**/
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}
body .arrows:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-left: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  transform: translate(26.6666666667px, 106.6666666667px) rotate(-45deg);
  animation: arrows 3s linear infinite;
}
body .arrows:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-left: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  transform: translate(53.3333333333px, 0px) rotate(-45deg);
  animation: arrows 3s linear infinite -1.5s;
}

@keyframes arrows {
  0% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0);
    transform: translate(-13.3333333333px, -53.3333333333px) rotate(-45deg);
  }
  10%, 90% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0);
  }
  50% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0.7);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0.7);
    transform: translate(-13.3333333333px, 0px) rotate(-45deg);
  }
  100% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0);
    transform: translate(-13.3333333333px, 53.3333333333px) rotate(-45deg);
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="arrows"></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://dev.finnthewebdesigner.com/pentitle.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/z-/scss-arrow-animation-BoyXKr */
body {
  background-color: #e25454;
}
body .arrows {
  position: relative;
  /**/
  position: absolute;
  top: 50%;
  left: 50%;
  /**/
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
}
body .arrows:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-left: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  transform: translate(26.6666666667px, 106.6666666667px) rotate(-45deg);
  animation: arrows 3s linear infinite;
}
body .arrows:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-left: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0.7);
  transform: translate(53.3333333333px, 0px) rotate(-45deg);
  animation: arrows 3s linear infinite -1.5s;
}

@keyframes arrows {
  0% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0);
    transform: translate(-13.3333333333px, -53.3333333333px) rotate(-45deg);
  }
  10%, 90% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0);
  }
  50% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0.7);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0.7);
    transform: translate(-13.3333333333px, 0px) rotate(-45deg);
  }
  100% {
    border-left: 26.6666666667px solid rgba(0, 0, 0, 0);
    border-bottom: 26.6666666667px solid rgba(0, 0, 0, 0);
    transform: translate(-13.3333333333px, 53.3333333333px) rotate(-45deg);
  }
}


/*Downloaded from https://www.codeseek.co/z-/scss-arrow-animation-BoyXKr */
pentitle="SCSS Arrow Animation";

Comments