Animated Swipe Icon

animated-swipe-icon.markdown

Animated Swipe Icon

A Pen by cave2006 on CodePen.

License.

index.html

<div class="container">
  <svg id="icon-swipe" xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 30 25"><title>icon-swipe</title><path id="right" d="M30,3.5,26.56,7l-.81-.82,2.06-2.1H22V2.92h5.81L25.74.82,26.55,0Z"/><path id="left" d="M8,4.08H2.19l2.06,2.1L3.44,7,0,3.5,3.45,0l.81.82L2.19,2.92H8Z"/><path id="hand" d="M25.41,11.18l-5.08-3A2.32,2.32,0,0,0,19,7.74a2.37,2.37,0,0,0-1.72.75v-5a2.46,2.46,0,0,0-.71-1.74A2.38,2.38,0,0,0,14.84,1h0a2.44,2.44,0,0,0-2.41,2.46V14.6l-.69-.7a4.7,4.7,0,0,0-3.36-1.42A4.75,4.75,0,0,0,6.32,13a1.26,1.26,0,0,0-.69.92A1.32,1.32,0,0,0,6,15l7.69,7.83A7.59,7.59,0,0,0,19,25a7.73,7.73,0,0,0,7.65-7.79V13.29A2.42,2.42,0,0,0,25.41,11.18Zm0,6A6.46,6.46,0,0,1,19,23.73h0a6.31,6.31,0,0,1-4.41-1.8L6.87,14.1a3.37,3.37,0,0,1,1.5-.35h0a3.42,3.42,0,0,1,2.47,1.05l1.53,1.55a.52.52,0,0,0,.36.16l.19,0a1.18,1.18,0,0,0,.75-1.1V3.46a1.17,1.17,0,0,1,1.16-1.19h0A1.18,1.18,0,0,1,16,3.46v6.91a.6.6,0,0,0,.39.56l.2,0a.58.58,0,0,0,.45-.22l1-1.3A1.16,1.16,0,0,1,19,9a1.12,1.12,0,0,1,.68.23l5.12,3a1.18,1.18,0,0,1,.59,1Z"/></svg>
</div>

style.scss

// Settings
$primary-color: #f07d00;
$secondary-color: #453d34;

* { box-sizing: border-box; }
.container {
  display: block;
  position: absolute;
    top: 50%;
    left: 50%;
  transform: translate(-50%,-50%);
}

svg#icon-swipe {
  width: 72px;
  height: 35px;
  //padding: 2px 0px;
  //border: 2px solid red;
  
  #hand {
    fill: $primary-color;
    transform-origin: 50% 100%;
    animation: hand-swipe 3.5s infinite ease;
  }
  #left, #right {
    fill: $secondary-color;
    opacity: 0;
  }
  #right { animation: arrow-right 3.5s infinite ease; }
  #left { animation: arrow-left 3.5s infinite ease; }
}

@keyframes hand-swipe {
  5% { transform: translateX(3px) rotate(6deg); }
  25% { transform: translateX(0px) rotate(0deg); }
  28% { transform: translateX(0px) rotate(0deg); }
  33% { transform: translateX(-3px) rotate(-6deg); }
  53% { transform: translateX(0px) rotate(0deg); }
  100% { transform: translateX(0px) rotate(0deg); }
}

@keyframes arrow-right {
  7% { transform: translateX(8px); opacity: 1; }
  17% { transform: translateX(10px); opacity: 0; }
  18%, 100% { transform: translateX(0); opacity: 0; }
}

@keyframes arrow-left {
  0%, 30% { transform: translateX(0); opacity: 0; }
  37% { transform: translateX(-8px); opacity: 1; }
  47% { transform: translateX(-10px); opacity: 0; }
  48%, 100% { transform: translateX(0); opacity: 0; }
}