CodePen Embed - Animated SVG arrow

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="arrows">
<g id="arrows-light">
  <path id="arrow-3" d="M78.613 97.4125C80.6158 98.5625 80.6227 101.449 78.6255 102.609L12.7168 140.871C10.7195 142.031 8.21608 140.594 8.21056 138.284L8.02836 62.0742C8.02284 59.7648 10.5194 58.3154 12.5221 59.4653L78.613 97.4125Z" fill-opacity="0.8"/>

<path id="arrow-2" d="M104.613 97.4125C106.616 98.5625 106.623 101.449 104.625 102.609L38.7166 140.871C36.7194 142.031 34.2159 140.594 34.2104 138.284L34.0282 62.0742C34.0227 59.7648 36.5192 58.3154 38.522 59.4653L104.613 97.4125Z"  fill-opacity="0.8"/>
</g>
<g id="arrows-dark">
<path id="arrow-1" d="M78.613 97.4125C80.6158 98.5625 80.6227 101.449 78.6255 102.609L12.7168 140.871C10.7195 142.031 8.21608 140.594 8.21056 138.284L8.02836 62.0742C8.02284 59.7648 10.5194 58.3154 12.5221 59.4653L78.613 97.4125Z"  fill-opacity="0.5"/>
</g>
</g>
</svg>


:root {
  --color-dark: #E35874;
  --color-light: #deedee;
}
svg path {
  transition: all 1s ease;
}

#arrow-3 {
  transform: translateX(-100%)
}

#arrows-light {
  fill: var(--color-light)
}
#arrows-dark{
    fill: var(--color-dark)
}

svg:hover {
  #arrow-3 { 
     transform: translateX(0%)
  }
  #arrow-2 { 
     transform: translateX(100%)
  }
  #arrow-1 { 
     transform: translateX(20%)
  }
}

View Compiled

This Pen is owned by Dee on CodePen.

See more by @tolkadot on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.