6+ JavaScript Animated Arrow Examples

This post contains a total of 6+ JavaScript Animated Arrow Examples with Source Code. All these Animated Arrows are made using JavaScript & Styled using CSS.

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

Related Posts

JavaScript Animated Arrow Examples

1. Animation Arrow

Made by Ícaro Heimig. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
#arrow-group { 
  transform: translate(-100%, -20%);
}

#arrow-point { 
  transform-style: preserve-3d;
  transform-box: fill-box;
}


#arrow-spark-top,
#arrow-spark-bottom {
  transform-box: fill-box;
  opacity: 0;
  transform-style: preserve-3d;
}


/* MAKE IT RUN */
.animated #arrow-group {
    -webkit-animation: 1s shoot forwards;
            animation: 1s shoot forwards;
}

.animated #arrow-point { 
    -webkit-animation: .3s shooted .7s forwards; 
            animation: .3s shooted .7s forwards;
}

.animated #arrow-spark-top,
.animated #arrow-spark-bottom {
  -webkit-animation: .2s sparks .8s forwards;
          animation: .2s sparks .8s forwards;
}


/* ANIMATIONS */
@-webkit-keyframes shoot {
  from { 
    transform: translate(-100%, -20%);
  }
  to {
    transform: translate(0);
  }
}
@keyframes shoot {
  from { 
    transform: translate(-100%, -20%);
  }
  to {
    transform: translate(0);
  }
}


@-webkit-keyframes shooted {
  from { 
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}


@keyframes shooted {
  from { 
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

@-webkit-keyframes sparks {
  from { 
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sparks {
  from { 
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Just a little styles to center it  */
body { 
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: 0;
  flex-direction: column;
}

button {
  border: 3px solid #FDF2E3;
  border-radius: 0; 
  cursor: pointer;
  padding: 10px 20px;
  font-size: 1rem;
}

button:hover {
  background-color: #FDF2E3;
}
</style>
</head>
<body>
  <svg width="270" height="270" viewBox="0 0 270 270" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="target">
<rect width="270" height="270" fill="white"/>
<circle id="background_circle" cx="134.5" cy="134.5" r="123.5" fill="#DEEFFF"/>
<path id="foot" d="M206.276 193.757C206.97 195.262 208.753 195.918 210.257 195.224C211.762 194.53 212.418 192.747 211.724 191.243L206.276 193.757ZM199.724 165.243C199.03 163.738 197.247 163.082 195.743 163.776C194.238 164.47 193.582 166.253 194.276 167.757L199.724 165.243ZM211.724 191.243L199.724 165.243L194.276 167.757L206.276 193.757L211.724 191.243Z" fill="#222630"/>
<g id="big-circle">
<path id="back" d="M170.912 73.9417L170.982 73.9559L171.054 73.9666C186.345 76.2675 196.636 86.7356 201.874 100.861C207.138 115.055 207.17 132.718 201.884 148.529C196.548 164.493 188.086 176.668 178.117 183.812C168.223 190.901 156.777 193.108 144.951 189.155C133.412 185.297 127.131 176.325 124.983 164.067C122.81 151.663 124.95 136.092 130.345 119.951C135.735 103.828 142.801 91.4991 150.175 83.6289C157.615 75.6884 164.89 72.7374 170.912 73.9417Z" fill="#C7CFDE" stroke="#222630" stroke-width="6"/>
<path id="big-circle-background" d="M194.095 139.198C185.755 170.574 161.312 191.309 139.498 185.511C117.684 179.713 106.76 149.578 115.099 118.203C123.438 86.8271 147.882 66.0921 169.696 71.8899C191.51 77.6877 202.434 107.823 194.095 139.198Z" fill="#EFF5FF"/>
<path id="big-circle-border" d="M140.179 187.903L139.295 190.241L139.442 190.297L139.595 190.333L140.179 187.903ZM168.052 72.0289L168.636 69.5982L168.052 72.0289ZM115.865 107.688C115.448 109.005 116.178 110.41 117.494 110.826C118.81 111.243 120.215 110.513 120.632 109.197L115.865 107.688ZM115.835 128.872C116.05 127.509 115.12 126.228 113.756 126.012C112.393 125.796 111.112 126.727 110.896 128.09L115.835 128.872ZM189.505 138.478C185.754 154.074 178.253 167.088 169.289 175.548C160.304 184.026 150.118 187.722 140.764 185.472L139.595 190.333C151.128 193.108 162.972 188.383 172.72 179.184C182.488 169.967 190.422 156.049 194.367 139.648L189.505 138.478ZM167.467 74.4595C176.821 76.7096 184.212 84.6336 188.358 96.2701C192.495 107.881 193.257 122.882 189.505 138.478L194.367 139.648C198.312 123.246 197.575 107.243 193.068 94.5919C188.57 81.9667 180.17 72.3725 168.636 69.5982L167.467 74.4595ZM120.632 109.197C129.461 81.298 152.318 70.8156 167.467 74.4595L168.636 69.5982C150.401 65.2119 125.309 77.8469 115.865 107.688L120.632 109.197ZM141.064 185.564C124.014 179.117 111.404 156.854 115.835 128.872L110.896 128.09C106.208 157.701 119.418 182.724 139.295 190.241L141.064 185.564Z" fill="#222630"/>
</g>
<g id="medium-circle">
<path id="medium-circle-background" d="M176.303 136.793C170.611 154.829 155.832 166.243 143.293 162.286C130.753 158.329 125.201 140.5 130.892 122.464C136.584 104.428 151.363 93.0145 163.902 96.9714C176.442 100.928 181.994 118.757 176.303 136.793Z" fill="white"/>
<path id="medium-circle-border" d="M143.5 162L142.517 164.298L142.657 164.359L142.804 164.401L143.5 162ZM162.5 96.5L163.196 94.0987L162.5 96.5ZM131.154 113.637C130.677 114.933 131.341 116.37 132.637 116.846C133.933 117.323 135.37 116.659 135.846 115.363L131.154 113.637ZM131.481 130.31C131.652 128.94 130.68 127.691 129.31 127.519C127.94 127.348 126.691 128.32 126.519 129.69L131.481 130.31ZM172.231 135.988C169.683 144.783 165.161 151.508 160.018 155.596C154.879 159.681 149.251 161.063 144.196 159.599L142.804 164.401C149.77 166.419 157.041 164.35 163.129 159.51C169.213 154.674 174.247 146.999 177.033 137.379L172.231 135.988ZM161.804 98.9013C166.712 100.323 170.626 104.878 172.68 111.712C174.722 118.504 174.781 127.185 172.231 135.988L177.033 137.379C179.818 127.767 179.821 118.097 177.468 110.272C175.128 102.488 170.31 96.1593 163.196 94.0987L161.804 98.9013ZM135.846 115.363C141.507 99.9709 153.526 96.5033 161.804 98.9013L163.196 94.0987C152.261 90.9315 137.671 95.9153 131.154 113.637L135.846 115.363ZM144.483 159.702C138.903 157.314 135.28 153.744 133.211 149.036C131.109 144.25 130.512 138.056 131.481 130.31L126.519 129.69C125.488 137.944 126.038 145.138 128.633 151.047C131.263 157.033 135.89 161.463 142.517 164.298L144.483 159.702Z" fill="#222630"/>
</g>
<g id="tiny-circle">
<path id="tiny-circke-background" d="M162.706 132.147C160.602 138.814 155.14 143.032 150.505 141.57C145.87 140.107 143.818 133.518 145.922 126.851C148.025 120.185 153.488 115.966 158.123 117.429C162.757 118.891 164.809 125.481 162.706 132.147Z" fill="#C7CFDE"/>
<path id="tiny-circke-border" d="M149.874 142.318L148.891 144.616L149.032 144.676L149.179 144.719L149.874 142.318ZM146.92 117.613C146.154 118.762 146.464 120.314 147.613 121.08C148.762 121.846 150.314 121.536 151.08 120.387L146.92 117.613ZM146.524 133.5C146.524 132.119 145.405 131 144.024 131C142.643 131 141.524 132.119 141.524 133.5L146.524 133.5ZM160.034 131.408C159.077 134.71 157.406 137.14 155.611 138.567C153.821 139.99 152.04 140.342 150.57 139.916L149.179 144.719C152.559 145.698 155.983 144.658 158.722 142.481C161.458 140.306 163.641 136.926 164.837 132.799L160.034 131.408ZM156.845 118.291C158.167 118.674 159.476 119.984 160.22 122.457C160.951 124.89 160.993 128.097 160.034 131.408L164.837 132.799C166.03 128.679 166.049 124.482 165.008 121.018C163.978 117.593 161.764 114.511 158.236 113.489L156.845 118.291ZM151.08 120.387C152.453 118.328 154.553 117.628 156.845 118.291L158.236 113.489C153.928 112.241 149.547 113.672 146.92 117.613L151.08 120.387ZM150.858 140.019C148.481 139.002 147.623 138.292 147.204 137.641C146.779 136.98 146.524 135.951 146.524 133.5L141.524 133.5C141.524 136.049 141.731 138.375 143 140.347C144.275 142.328 146.342 143.526 148.891 144.616L150.858 140.019Z" fill="#222630"/>
</g>
<g id="arrow-group">
<path id="arrow-point" d="M156.766 115.839C156.125 114.312 154.367 113.593 152.839 114.234C151.312 114.875 150.593 116.633 151.234 118.161L156.766 115.839ZM159.307 129.65L161.018 132.115C162.181 131.307 162.621 129.796 162.074 128.49L159.307 129.65ZM146.289 135.036C144.928 135.98 144.591 137.85 145.536 139.211C146.481 140.572 148.35 140.909 149.711 139.964L146.289 135.036ZM151.234 118.161L156.541 130.811L162.074 128.49L156.766 115.839L151.234 118.161ZM157.596 127.186L146.289 135.036L149.711 139.964L161.018 132.115L157.596 127.186Z" fill="#222630"/>
<g id="arrow">
<path d="M65 101.5L58 83L91 92.5L95 110L81.5 122L50 113.5L65 101.5Z" fill="#F3C074"/>
<path d="M58 83L58.8299 80.1171C57.7387 79.8029 56.5637 80.1318 55.7941 80.9668C55.0245 81.8017 54.7923 82.9996 55.1941 84.0617L58 83ZM65 101.5L66.8741 103.843C67.89 103.03 68.2663 101.655 67.8059 100.438L65 101.5ZM50 113.5L48.1259 111.157C47.2432 111.864 46.8324 113.006 47.0632 114.112C47.2939 115.219 48.1271 116.102 49.2184 116.396L50 113.5ZM81.5 122L80.7184 124.896C81.6945 125.16 82.7375 124.914 83.4931 124.242L81.5 122ZM157.113 132.366C158.696 132.856 160.376 131.97 160.866 130.387C161.356 128.804 160.47 127.124 158.887 126.634L157.113 132.366ZM91 92.5L93.9246 91.8315C93.6813 90.7672 92.8791 89.9191 91.8299 89.6171L91 92.5ZM55.1941 84.0617L62.1941 102.562L67.8059 100.438L60.8059 81.9383L55.1941 84.0617ZM63.1259 99.1574L48.1259 111.157L51.8741 115.843L66.8741 103.843L63.1259 99.1574ZM49.2184 116.396L80.7184 124.896L82.2816 119.104L50.7816 110.604L49.2184 116.396ZM83.4931 124.242L96.9931 112.242L93.0069 107.758L79.5069 119.758L83.4931 124.242ZM94.1129 112.866L157.113 132.366L158.887 126.634L95.8871 107.134L94.1129 112.866ZM57.1701 85.8829L90.1701 95.3829L91.8299 89.6171L58.8299 80.1171L57.1701 85.8829ZM88.0754 93.1685L92.0754 110.668L97.9246 109.332L93.9246 91.8315L88.0754 93.1685Z" fill="#222630"/>
</g>
<circle id="dot" cx="72" cy="97.5" r="2.5" fill="#222630"/>
<circle id="dot_2" cx="73" cy="111.5" r="2.5" fill="#222630"/>
<circle id="dot_3" cx="77" cy="104.5" r="2.5" fill="#222630"/>
<circle id="dot_4" cx="84" cy="106.5" r="2.5" fill="#222630"/>
</g>
<path id="arrow-spark-top" d="M110.952 84.4633C110.655 82.8332 109.093 81.752 107.463 82.0484C105.833 82.3448 104.752 83.9065 105.048 85.5367L110.952 84.4633ZM107.048 96.5367C107.345 98.1668 108.907 99.248 110.537 98.9516C112.167 98.6552 113.248 97.0935 112.952 95.4633L107.048 96.5367ZM105.048 85.5367L107.048 96.5367L112.952 95.4633L110.952 84.4633L105.048 85.5367Z" fill="#222630"/>
<path id="arrow-spark-bottom" d="M104.458 134.72C105.408 133.363 105.078 131.492 103.72 130.542C102.363 129.592 100.492 129.922 99.5423 131.28L104.458 134.72ZM92.5423 141.28C91.5922 142.637 91.9223 144.508 93.2796 145.458C94.637 146.408 96.5076 146.078 97.4577 144.72L92.5423 141.28ZM99.5423 131.28L92.5423 141.28L97.4577 144.72L104.458 134.72L99.5423 131.28Z" fill="#222630"/>
</g>
</svg>

<button>Shoot again!</button>
      <script>
(function () {
  const $el = document.querySelector('button');
  const $body = document.querySelector('body');

  $body.classList.add('animated');

  $el.addEventListener('click', () => {
    if ($body.classList.contains('animated'))
    $body.classList.remove('animated');

    window.setTimeout(() => $body.classList.add('animated'), 100);
  });
})();
    </script>
</body>
</html>

2. Arrow animation

Made by Adam Weber. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.container {
  position: absolute;
  display: flex;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
}

svg.animation-svg {
  fill: black;
  width: 500px;
  height: 300px;
}

circle:nth-child(1) {
  animation: 2s infinite growShrink 0.125s;
}

circle:nth-child(2) {
  animation: 2s infinite growShrink 0.25s;
}

circle:nth-child(3) {
  animation: 2s infinite growShrink 0.375s;
}

circle:nth-child(4) {
  animation: 2s infinite growShrink 0.5s;
}

circle:nth-child(5) {
  animation: 2s infinite growShrink 0.625s;
}

circle:nth-child(6) {
  animation: 2s infinite growShrink 0.75s;
}

circle:nth-child(7) {
  animation: 2s infinite growShrink 0.875s;
}

circle:nth-child(8) {
  animation: 2s infinite growShrink 1s;
}

circle:nth-child(9) {
  animation: 2s infinite growShrink 1.125s;
}

circle:nth-child(10) {
  animation: 2s infinite growShrink 1.25s;
}

@keyframes growShrink {
  0% {
    r: 1;
  }
  3% {
    r: 2;
  }
  5% {
    r: 3;
  }
  12% {
    r: 3;
  }
  30% {
    r: 1;
  }
}
</style>
</head>
<body>
  <div class="container">
  <svg id="arrow-animation" class="animation-svg"></svg>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
const svg = document.getElementById('arrow-animation');
const distance = 12;
const rowCount = 5;
const columnCount = 10;
const minRadius = 1;
const maxradius = 3;
const svgWidth = svg.clientWidth;
const svgHeight = svg.clientHeight;
let circles = '';


for (let i = 0; i < rowCount; i++) {if (window.CP.shouldStopExecution(0)) break;
  circles += '<g class="circle-row">';
  for (let j = 0; j < columnCount; j++) {if (window.CP.shouldStopExecution(1)) break;
    const cx = svgWidth / 2 + j * distance - distance * Math.abs((rowCount - 1) / 2 - i);
    const cy = svgHeight / 2 + i * distance;
    circles += `<circle cx="${cx}" cy="${cy}" r="${minRadius}"/>`;
  }window.CP.exitedLoop(1);
  circles += '</g>';
}window.CP.exitedLoop(0);

svg.innerHTML = circles;
    </script>
</body>
</html>

3. Fluid download animation

Made by Aaron Iker. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
.upload {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  position: relative;
  border: 2px solid #419AFE;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.2s ease;
}
.upload .path {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin: -36px 0 0 -36px;
  width: 72px;
  height: 72px;
}
.upload .path .arrow {
  bottom: 27px;
  width: 2px;
  height: 21px;
  position: absolute;
  left: 50%;
  border-radius: 1px;
  margin: 0 0 0 -1px;
  transform-origin: 50% 100%;
}
.upload .path .arrow:before, .upload .path .arrow:after {
  content: "";
  display: block;
  width: 2px;
  height: 14px;
  bottom: -2px;
  background: #fff;
  position: absolute;
  border-radius: 1px;
  transform-origin: 50% 100%;
}
.upload .path .arrow:before {
  right: 50%;
  transform: rotate(-44deg) translateX(2px);
}
.upload .path .arrow:after {
  left: 50%;
  transform: rotate(44deg) translateX(-2px);
}
.upload .path svg {
  width: 72px;
  height: 72px;
  display: block;
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dashoffset: 592.73;
  stroke-dasharray: 0 592.73 20 592.73;
}
.upload .circle {
  position: absolute;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  overflow: hidden;
}
.upload .circle .water {
  transform: translateY(116%);
  background: #419AFE;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.upload .circle .water svg {
  display: block;
  width: 116px;
  height: 6px;
  position: absolute;
  bottom: 100%;
}
.upload .circle .water svg:nth-child(1) {
  right: 0;
  fill: #308FFA;
  -webkit-animation: forward 1.65s infinite;
          animation: forward 1.65s infinite;
}
.upload .circle .water svg:nth-child(2) {
  left: 0;
  fill: #419AFE;
  margin-bottom: -1px;
  -webkit-animation: backward 0.825s infinite linear;
          animation: backward 0.825s infinite linear;
}
.upload.loading .path {
  -webkit-animation: movePath 0.4s linear forwards;
          animation: movePath 0.4s linear forwards;
}
.upload.loading .path .arrow {
  -webkit-animation: arrow 0.5s linear forwards 3.7s;
          animation: arrow 0.5s linear forwards 3.7s;
}
.upload.loading .path .arrow:before {
  -webkit-animation: arrowB 0.4s linear forwards, arrowBCheck 0.5s linear forwards 3.7s;
          animation: arrowB 0.4s linear forwards, arrowBCheck 0.5s linear forwards 3.7s;
}
.upload.loading .path .arrow:after {
  -webkit-animation: arrowA 0.4s linear forwards, arrowACheck 0.5s linear forwards 3.7s;
          animation: arrowA 0.4s linear forwards, arrowACheck 0.5s linear forwards 3.7s;
}
.upload.loading .path svg {
  -webkit-animation: load 3s linear forwards 0.45s, reset 0.7s linear forwards 3.7s;
          animation: load 3s linear forwards 0.45s, reset 0.7s linear forwards 3.7s;
}
.upload.loading .circle .water {
  -webkit-animation: fill 3s linear forwards 0.45s;
          animation: fill 3s linear forwards 0.45s;
}
.upload:active {
  transform: scale(0.92) translateZ(0);
}

@-webkit-keyframes load {
  0% {
    stroke-dashoffset: 592.73;
    stroke-dasharray: 0 592.73 20 592.73;
  }
  42% {
    stroke-dasharray: 0 592.73 80 592.73;
  }
  85% {
    stroke-dashoffset: 80;
    stroke-dasharray: 0 592.73 32 592.73;
  }
  100% {
    stroke-dashoffset: 32;
    stroke-dasharray: 0 592.73 32 592.73;
  }
}

@keyframes load {
  0% {
    stroke-dashoffset: 592.73;
    stroke-dasharray: 0 592.73 20 592.73;
  }
  42% {
    stroke-dasharray: 0 592.73 80 592.73;
  }
  85% {
    stroke-dashoffset: 80;
    stroke-dasharray: 0 592.73 32 592.73;
  }
  100% {
    stroke-dashoffset: 32;
    stroke-dasharray: 0 592.73 32 592.73;
  }
}
@-webkit-keyframes reset {
  0%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes reset {
  0%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes movePath {
  70% {
    transform: translateY(-10px);
  }
}
@keyframes movePath {
  70% {
    transform: translateY(-10px);
  }
}
@-webkit-keyframes arrow {
  0% {
    background: #fff;
    transform: rotate(34deg) translate(-2.5px, 2px);
  }
  40% {
    transform: rotate(-7deg) translate(0, 0);
  }
  99% {
    transform: rotate(0) translate(0, 0);
  }
  100% {
    background: #fff;
  }
}
@keyframes arrow {
  0% {
    background: #fff;
    transform: rotate(34deg) translate(-2.5px, 2px);
  }
  40% {
    transform: rotate(-7deg) translate(0, 0);
  }
  99% {
    transform: rotate(0) translate(0, 0);
  }
  100% {
    background: #fff;
  }
}
@-webkit-keyframes arrowBCheck {
  0%, 20% {
    transform: rotate(-86deg) translateX(2px) translateY(1px) scaleY(0.714);
    opacity: 1;
  }
  100% {
    transform: rotate(-44deg) translateX(2px) scaleY(1) translateY(0);
    opacity: 1;
  }
}
@keyframes arrowBCheck {
  0%, 20% {
    transform: rotate(-86deg) translateX(2px) translateY(1px) scaleY(0.714);
    opacity: 1;
  }
  100% {
    transform: rotate(-44deg) translateX(2px) scaleY(1) translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes arrowACheck {
  0% {
    transform: rotate(0deg) translate(-1px, -1px);
    opacity: 1;
  }
  40% {
    transform: rotate(60deg) translate(-2px, 1px);
    opacity: 1;
  }
  100% {
    transform: rotate(44deg) translateX(-2px);
    opacity: 1;
  }
}
@keyframes arrowACheck {
  0% {
    transform: rotate(0deg) translate(-1px, -1px);
    opacity: 1;
  }
  40% {
    transform: rotate(60deg) translate(-2px, 1px);
    opacity: 1;
  }
  100% {
    transform: rotate(44deg) translateX(-2px);
    opacity: 1;
  }
}
@-webkit-keyframes arrowB {
  0% {
    transform: rotate(-44deg) translateX(2px);
  }
  60% {
    transform: rotate(-60deg) translateX(2px);
  }
  99% {
    transform: rotate(0deg) translateX(1px);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translateX(1px);
    opacity: 0;
  }
}
@keyframes arrowB {
  0% {
    transform: rotate(-44deg) translateX(2px);
  }
  60% {
    transform: rotate(-60deg) translateX(2px);
  }
  99% {
    transform: rotate(0deg) translateX(1px);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translateX(1px);
    opacity: 0;
  }
}
@-webkit-keyframes arrowA {
  0% {
    transform: rotate(44deg) translateX(-2px);
  }
  60% {
    transform: rotate(60deg) translateX(-2px);
  }
  99% {
    transform: rotate(0deg) translateX(-1px);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translateX(-1px);
    opacity: 0;
  }
}
@keyframes arrowA {
  0% {
    transform: rotate(44deg) translateX(-2px);
  }
  60% {
    transform: rotate(60deg) translateX(-2px);
  }
  99% {
    transform: rotate(0deg) translateX(-1px);
    opacity: 1;
  }
  100% {
    transform: rotate(0deg) translateX(-1px);
    opacity: 0;
  }
}
@-webkit-keyframes fill {
  0% {
    transform: translateY(116%);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@keyframes fill {
  0% {
    transform: translateY(116%);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}
@-webkit-keyframes backward {
  100% {
    transform: translateX(-50%);
  }
}
@keyframes backward {
  100% {
    transform: translateX(-50%);
  }
}
@-webkit-keyframes forward {
  100% {
    transform: translateX(50%);
  }
}
@keyframes forward {
  100% {
    transform: translateX(50%);
  }
}
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  color: #ADAFB6;
  background: #2286F6;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 24px;
  bottom: 24px;
}
body .dribbble img {
  display: block;
  width: 76px;
}
</style>
</head>
<body>
  <div class="upload">
    <div class="path">
        <div class="arrow"></div>
        <svg>
            <use xlink:href="#path">
        </svg>
    </div>
    <div class="circle">
        <div class="water">
            <svg>
                <use xlink:href="#wave">
            </svg>
            <svg>
                <use xlink:href="#wave">
            </svg>
        </div>
    </div>
</div>
        
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol viewBox="0 0 72 72" id="path">
        <path d="M36,25.12 L36,43.68 C36,53.3185944 31.52,56.7319277 22.56,53.92 C9.12,49.7021084 4,44.5565697 4,36 C4,18.72 18.72,4 36,4 C53.28,4 68,18.72 68,36 C68,53.28 53.28,68 36,68 C18.72,68 4,53.28 4,36 C4,18.72 18.72,4 36,4 C53.28,4 68,18.72 68,36 C68,53.28 53.28,68 36,68 C18.72,68 4,53.28 4,36 C4,18.72 18.72,4 36,4 C43.2533333,4 49.8789797,6.40627283 55.876939,11.2188185 L32.7391444,45.2477592 L23.8653488,38.1626948"></path>
    </symbol>
    <symbol viewBox="0 0 116 6" id="wave">
        <path d="M58,0 C70.6086957,0 79.3822464,6 87,6 L58,6 L29,6 C36.6177536,6 45.3913043,0 58,0 Z M0,0 C12.6086957,0 21.3822464,6 29,6 L0,6 L0,0 Z M116,0 L116,6 L87,6 C94.6177536,6 103.391304,0 116,0 Z"></path>
    </symbol>
</svg>
        
<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5477227-Fluid-Download-Animation" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$('.upload').on('click touch', function (e) {

  e.preventDefault();

  var self = $(this);

  self.addClass('loading');
  setTimeout(function () {
    self.removeClass('loading');
  }, 4200);

});
    </script>
</body>
</html>

4. Go This Way

Made by Chris Kujawa. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Creepster&display=swap'); 
body{
  background: black;  
  height: 100vh;
  width: 100vw;
}

#arrowDiv{
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: repeat(7, auto);
  grid-template-columns: repeat(8, auto);
  justify-items: center;
  align-items: center;
  color: white;
}

.arrow{
  font-size: 5rem;
  transition: all .8s;  
  text-shadow: 8px 8px 4px rgba(140, 0, 2, .5);
}

.up {
  transform: scale(1.1);
  transform: rotate(180deg);
}

.down {
  transform: scale(.9);
}

.text{
  padding: .5rem;
  margin: .5rem;
  color: #8A0707;
  font-size: 5rem;
  font-family: Creepster;
  letter-spacing: 0.12rem;
  text-shadow: 8px 8px 9px rgba(140, 0, 2, .7);
}

.container {
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
</head>
<body>
  <div class="container">
  <div id="arrowDiv"></div>
  <div class="text">Enter Here</div>
</div>
      <script>
const arrows =
[
[0, 0, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0],
[1, 1, 1, 1, 1, 1, 1, 0],
[1, 1, 1, 1, 1, 1, 1, 1],
[1, 1, 1, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0]];


const colors = [
"#4A0404",
"#D60B0B",
"#8A0707",
"#960808",
"#700606"];


const getRandomColor = () => {
  return colors[Math.floor(Math.random() * colors.length)];
};

const buildArrow = () => {
  const arrowDiv = document.getElementById("arrowDiv");
  for (i = 0; i < arrows.length; i++) {
    const row = arrows[i];
    for (j = 0; j < row.length; j++) {
      const child = document.createElement("div");
      if (row[j] === 0) {
        child.innerHTML = " ";
      } else {
        child.innerHTML = "➀";
        child.classList.add("arrow");
        child.id = "arrow" + i + ":" + j;
      }
      arrowDiv.appendChild(child);
    }
  }
};

const animateIt = () => {
  const color = getRandomColor();
  const numberOfRows = arrows.length;
  const numberOfColumns = arrows[0].length;

  for (col = 0; col < numberOfColumns; col++) {
    for (row = 0; row < numberOfRows; row++) {
      const id = "arrow" + row + ":" + col;
      let currentEl = document.getElementById(id);
      if (currentEl) {
        currentEl.style.color = color;

        if (currentEl.classList.contains("up")) {
          currentEl.classList.remove("up");
          currentEl.classList.add("down");
        } else {
          currentEl.classList.remove("down");
          currentEl.classList.add("up");
        }
      }

    }
  }
};

buildArrow();
setInterval(animateIt, 1500);
//# sourceURL=pen.js
    </script>
</body>
</html>

5. Dropdown arrow animation

Made by Zoomo Design. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400' rel='stylesheet' type='text/css'>
<style>
body {
  color: white;
  font-family: sans-serif;
  background-color: #616161;
  font-family: "Source Sans Pro", sans-serif;
}

.wrapper {
  margin: 40px auto;
  width: 400px;
  display: block;
  text-align: center;
  transition: 0.15s ease;
}
.wrapper.active .arrow {
  transform: rotate(45deg) translate(-5px, -5px);
}
.wrapper.active .arrow:before {
  transform: translate(10px, 0);
}
.wrapper.active .arrow:after {
  transform: rotate(90deg) translate(10px, 0);
}
.wrapper.active ul {
  opacity: 0.3;
  height: 108px;
}

.wrapper2 ul {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.wrapper2 li:first-child {
  margin-top: 16px;
}
.wrapper2 li:last-child {
  margin-bottom: 3px;
}
.wrapper2.active ul {
  margin-top: 12px;
}
.wrapper2.active .arrow {
  transform: rotate(45deg) translate(38px, 38px);
  opacity: 0.6;
}
.wrapper2.active .arrow:before {
  transform: translate(5px, 0);
}
.wrapper2.active .arrow:after {
  transform: rotate(90deg) translate(5px, 0);
}

.wrapper3 .arrow {
  transform: rotate(0);
  left: 0;
}
.wrapper3 .arrow:before, .wrapper3 .arrow:after {
  background-color: transparent;
  width: 3px;
  height: 10px;
  display: inline-block;
  position: absolute;
  border-bottom: 12px solid white;
  top: 0;
  left: 0;
  transform: rotate(0);
}
.wrapper3 .arrow:before {
  transform: rotate(-135deg);
}
.wrapper3 .arrow:after {
  transform: rotate(135deg);
}
.wrapper3.active .arrow {
  transform: rotate(0);
  transform: translate(0, -6px);
}
.wrapper3.active .arrow:before {
  transform: rotate(-45deg);
}
.wrapper3.active .arrow:after {
  transform: rotate(45deg);
}

.arrow {
  width: 13px;
  height: 13px;
  display: inline-block;
  position: relative;
  bottom: -5px;
  left: -10px;
  transition: 0.4s ease;
  margin-top: 2px;
  text-align: left;
  transform: rotate(45deg);
  float: right;
}
.arrow:before, .arrow:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 12px;
  height: 3px;
  background-color: #fff;
  transition: 0.4s ease;
}
.arrow:after {
  position: absolute;
  transform: rotate(90deg);
  top: -5px;
  left: 5px;
}

.click-text {
  display: block;
  text-align: left;
  padding: 0 12px 16px;
  margin: 0;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: 0.15s ease;
}
.click-text:hover {
  color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

ul {
  padding: 0;
  margin: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.4s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

li {
  list-style-type: none;
  margin: 0 auto;
  padding: 4px 12px;
  text-align: left;
  cursor: pointer;
}
li:first-child {
  margin-top: 12px;
}
li:last-child {
  margin-bottom: 12px;
}
</style>
</head>
<body>
  <div class="wrapper wrapper1"  id="wrapper">
  <p class="click-text">
    What does Marsellus Wallace not look like? <span class="arrow"></span>
  </p>
  <ul>
    <li>Black</li>
    <li>Bald</li>
    <li>A Bitch</li>
  </ul>  
</div>

<div class="wrapper wrapper2"  id="wrapper2">
  <p class="click-text">
    Malkovich malkovich? <span class="arrow"></span>
  </p>
  <ul>
    <li>Malkovich</li>
    <li>Malkovich</li>
    <li>Malkovich</li>
  </ul>  
</div>

<div class="wrapper wrapper3"  id="wrapper3">
  <p class="click-text">
    What is your favourite colour? <span class="arrow"></span>
  </p>
  <ul>
    <li>Blue</li>
    <li>Yellow</li>
    <li>Not Sure</li>
  </ul>  
</div>
      <script>
document.getElementById('wrapper').onclick = function () {

  var className = ' ' + wrapper.className + ' ';

  this.className = ~className.indexOf(' active ') ?
  className.replace(' active ', ' ') :
  this.className + ' active';
};

document.getElementById('wrapper2').onclick = function () {

  var className = ' ' + wrapper2.className + ' ';

  this.className = ~className.indexOf(' active ') ?
  className.replace(' active ', ' ') :
  this.className + ' active';
};

document.getElementById('wrapper3').onclick = function () {

  var className = ' ' + wrapper3.className + ' ';

  this.className = ~className.indexOf(' active ') ?
  className.replace(' active ', ' ') :
  this.className + ' active';
};
    </script>
</body>
</html>

6. Arrow animation

Made by Aaron Iker. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
.arrow {
  --active: #fff;
  --border: rgba(255, 255, 255, .12);
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
}
.arrow.left {
  transform: scaleX(-1);
}
.arrow i {
  display: block;
  position: absolute;
  margin: -10px 0 0 -10px;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
}
.arrow i:before, .arrow i:after {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--active);
  margin: -1px 0 0 -5px;
  display: block;
  transform-origin: 9px 50%;
}
.arrow i:before {
  transform: rotate(-40deg);
}
.arrow i:after {
  transform: rotate(40deg);
}
.arrow:before, .arrow:after {
  content: "";
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 50%;
  border: 2px solid var(--border);
}
.arrow svg {
  width: 44px;
  height: 44px;
  display: block;
  position: relative;
  z-index: 1;
  color: var(--active);
  stroke-width: 2px;
  stroke-dashoffset: 126;
  stroke-dasharray: 126 126 0;
  transform: rotate(0deg);
}
.arrow.animate svg {
  -webkit-animation: stroke 1s ease forwards 0.3s;
          animation: stroke 1s ease forwards 0.3s;
}
.arrow.animate i {
  -webkit-animation: arrow 1.6s ease forwards;
          animation: arrow 1.6s ease forwards;
}
.arrow.animate i:before {
  -webkit-animation: arrowUp 1.6s ease forwards;
          animation: arrowUp 1.6s ease forwards;
}
.arrow.animate i:after {
  -webkit-animation: arrowDown 1.6s ease forwards;
          animation: arrowDown 1.6s ease forwards;
}

@-webkit-keyframes stroke {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 126;
  }
}

@keyframes stroke {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 126;
  }
}
@-webkit-keyframes arrow {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  23% {
    transform: translateX(17px);
    opacity: 1;
  }
  24%, 80% {
    transform: translateX(-22px);
    opacity: 0;
  }
  81% {
    opacity: 1;
    transform: translateX(-22px);
  }
}
@keyframes arrow {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  23% {
    transform: translateX(17px);
    opacity: 1;
  }
  24%, 80% {
    transform: translateX(-22px);
    opacity: 0;
  }
  81% {
    opacity: 1;
    transform: translateX(-22px);
  }
}
@-webkit-keyframes arrowUp {
  0%, 100% {
    transform: rotate(-40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
@keyframes arrowUp {
  0%, 100% {
    transform: rotate(-40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
@-webkit-keyframes arrowDown {
  0%, 100% {
    transform: rotate(40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
@keyframes arrowDown {
  0%, 100% {
    transform: rotate(40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
.demo {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  grid-gap: 32px;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #275EFE;
}
body .dribbble {
  position: fixed;
  display: block;
  right: 24px;
  bottom: 24px;
}
body .dribbble img {
  display: block;
  width: 76px;
}
</style>
</head>
<body>
  <div class="demo">

    <a href="" class="arrow left">
        <i></i>
        <svg>
            <use xlink:href="#circle">
        </svg>
    </a>

    <a href="" class="arrow">
        <i></i>
        <svg>
            <use xlink:href="#circle">
        </svg>
    </a>

</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44px" height="44px" id="circle" fill="none" stroke="currentColor">
        <circle r="20" cy="22" cx="22" id="test">
    </symbol>
</svg>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/6201452-Arrow-micro-interaction" target="_blank"><img src="https://dribbble.com/assets/logo-small-2x-9fe74d2ad7b25fba0f50168523c15fda4c35534f9ea0b1011179275383035439.png" alt=""></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$('.arrow').on('click touch', function (e) {

  e.preventDefault();

  let arrow = $(this);

  if (!arrow.hasClass('animate')) {
    arrow.addClass('animate');
    setTimeout(() => {
      arrow.removeClass('animate');
    }, 1600);
  }

});
    </script>
</body>
</html>

7. Animated arrow open icon menu

Made by sebastiend. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body{
  height: 100%;
}

body{
  font-family: monospace;
  background: #f7ea00;
  background: -moz-linear-gradient(top, #f7ea00 0%, #febf01 100%);
  background: -webkit-linear-gradient(top, #f7ea00 0%,#febf01 100%);
  background: linear-gradient(to bottom, #f7ea00 0%,#febf01 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7ea00', endColorstr='#febf01',GradientType=0 );
}

.content{
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 100px;
  box-sizing: border-box
}

p{
  font-style: bolder;
  font-size: 12px;
  margin-bottom: 20px;
}

.nav-icon {
  display: block;
  margin: auto;
  height: 32px;
  width: 40px;
  position: relative;
  cursor: pointer;
  transform: rotate(-90deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}


.nav-icon span {
  position: absolute;
  display: block;
  height: 3px;
  width: 100%;
  background-color: white;
  top: -3px;
  transform: rotate(-60deg) translateX(-50%);
  border-radius: 3px;
  margin-top: -1px;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.nav-icon.active span {
  top: 18px;
  transform: rotate(225deg);
}

.nav-icon::after {
  left: 0;
  display: block;
  content: " ";
  height: 3px;
  width: 100%;
  background-color: white;
  position: absolute;
  bottom: -1px;
  border-radius: 3px;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.nav-icon::before {
  left: 0;
  display: block;
  content: " ";
  height: 3px;
  width: 100%;
  background-color: white;
  position: absolute;
  top: -3px;
  transform: rotate(60deg) translateX(50%);
  border-radius: 3px;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

.nav-icon.active::after {
  bottom: -20px;
  opacity: 0;
}

.nav-icon.active::before {
  top: 18px;
  transform: rotate(-225deg);
}
</style>
</head>
<body>
  <body>
  <div class="content">
    <h1>Animated icon</h1>
    <p>Click Me !</p>
    <div class="nav-icon">
      <span></span>
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script>
$('.nav-icon').click(function () {
  $('.nav-icon').toggleClass('active');
});
    </script>
</body>
</html>