AI CSS Animations

Card Terminal Tap

An isometric hairline payment terminal: a contactless card glides in, dips for a tap and lifts away, then the accent check mark springs onto the screen. The card is a thin slab floating above.

Also known as: hairline skill, isometric payment terminal, contactless payment animation css.

HTML

<div class="hln-card-terminal-tap" role="img" aria-label="A card tapping a payment terminal">
  <svg viewBox="-110 -60 220 120" aria-hidden="true">
    <g transform="translate(10.4 -19.6) scale(1.15)">
      <g><polygon points="-47.07,18 -46.94,17.31 -46.53,16.65 -45.88,16.04 -45,15.5 -5,-4.5 -3.93,-4.94 -2.71,-5.27 -1.38,-5.47 0,-5.54 1.38,-5.47 2.71,-5.27 3.93,-4.94 5,-4.5 27,6.5 27.88,7.04 28.53,7.65 28.94,8.31 29.07,9 29.07,16 28.94,16.69 28.53,17.35 27.88,17.96 27,18.5 -13,38.5 -14.07,38.94 -15.29,39.27 -16.62,39.47 -18,39.54 -19.38,39.47 -20.71,39.27 -21.93,38.94 -23,38.5 -45,27.5 -45.88,26.96 -46.53,26.35 -46.94,25.69 -47.07,25"/><polygon points="27,6.5 27.88,7.04 28.53,7.65 28.94,8.31 29.07,9 28.94,9.69 28.53,10.35 27.88,10.96 27,11.5 -13,31.5 -14.07,31.94 -15.29,32.27 -16.62,32.47 -18,32.54 -19.38,32.47 -20.71,32.27 -21.93,31.94 -23,31.5 -45,20.5 -45.88,19.96 -46.53,19.35 -46.94,18.69 -47.07,18 -46.94,17.31 -46.53,16.65 -45.88,16.04 -45,15.5 -5,-4.5 -3.93,-4.94 -2.71,-5.27 -1.38,-5.47 0,-5.54 1.38,-5.47 2.71,-5.27 3.93,-4.94 5,-4.5"/></g>
      <polygon class="hln-card-terminal-tap-l" points="23,8 23.35,8.21 23.61,8.46 23.77,8.72 23.83,9 23.77,9.28 23.61,9.54 23.35,9.79 23,10 8,17.5 7.57,17.68 7.08,17.81 6.55,17.89 6,17.91 5.45,17.89 4.92,17.81 4.43,17.68 4,17.5 -17,7 -17.35,6.79 -17.61,6.54 -17.77,6.28 -17.83,6 -17.77,5.72 -17.61,5.46 -17.35,5.21 -17,5 -2,-2.5 -1.57,-2.68 -1.08,-2.81 -0.55,-2.89 0,-2.91 0.55,-2.89 1.08,-2.81 1.57,-2.68 2,-2.5"/>
      <polygon class="hln-card-terminal-tap-l" points="-17,11.5 -16.82,11.61 -16.69,11.73 -16.61,11.86 -16.59,12 -16.61,12.14 -16.69,12.27 -16.82,12.39 -17,12.5 -18.6,13.3 -18.81,13.39 -19.06,13.45 -19.32,13.49 -19.6,13.51 -19.88,13.49 -20.14,13.45 -20.39,13.39 -20.6,13.3 -24.6,11.3 -24.78,11.19 -24.91,11.07 -24.99,10.94 -25.01,10.8 -24.99,10.66 -24.91,10.53 -24.78,10.41 -24.6,10.3 -23,9.5 -22.79,9.41 -22.54,9.35 -22.28,9.31 -22,9.29 -21.72,9.31 -21.46,9.35 -21.21,9.41 -21,9.5"/>
      <polygon class="hln-card-terminal-tap-l" points="-9,15.5 -8.82,15.61 -8.69,15.73 -8.61,15.86 -8.59,16 -8.61,16.14 -8.69,16.27 -8.82,16.39 -9,16.5 -10.6,17.3 -10.81,17.39 -11.06,17.45 -11.32,17.49 -11.6,17.51 -11.88,17.49 -12.14,17.45 -12.39,17.39 -12.6,17.3 -16.6,15.3 -16.78,15.19 -16.91,15.07 -16.99,14.94 -17.01,14.8 -16.99,14.66 -16.91,14.53 -16.78,14.41 -16.6,14.3 -15,13.5 -14.79,13.41 -14.54,13.35 -14.28,13.31 -14,13.29 -13.72,13.31 -13.46,13.35 -13.21,13.41 -13,13.5"/>
      <polygon class="hln-card-terminal-tap-l" points="-1,19.5 -0.82,19.61 -0.69,19.73 -0.61,19.86 -0.59,20 -0.61,20.14 -0.69,20.27 -0.82,20.39 -1,20.5 -2.6,21.3 -2.81,21.39 -3.06,21.45 -3.32,21.49 -3.6,21.51 -3.88,21.49 -4.14,21.45 -4.39,21.39 -4.6,21.3 -8.6,19.3 -8.78,19.19 -8.91,19.07 -8.99,18.94 -9.01,18.8 -8.99,18.66 -8.91,18.53 -8.78,18.41 -8.6,18.3 -7,17.5 -6.79,17.41 -6.54,17.35 -6.28,17.31 -6,17.29 -5.72,17.31 -5.46,17.35 -5.21,17.41 -5,17.5"/>
      <polygon class="hln-card-terminal-tap-l" points="-22.4,14.2 -22.22,14.31 -22.09,14.43 -22.01,14.56 -21.99,14.7 -22.01,14.84 -22.09,14.97 -22.22,15.09 -22.4,15.2 -24,16 -24.21,16.09 -24.46,16.15 -24.72,16.19 -25,16.21 -25.28,16.19 -25.54,16.15 -25.79,16.09 -26,16 -30,14 -30.18,13.89 -30.31,13.77 -30.39,13.64 -30.41,13.5 -30.39,13.36 -30.31,13.23 -30.18,13.11 -30,13 -28.4,12.2 -28.19,12.11 -27.94,12.05 -27.68,12.01 -27.4,11.99 -27.12,12.01 -26.86,12.05 -26.61,12.11 -26.4,12.2"/>
      <polygon class="hln-card-terminal-tap-l" points="-14.4,18.2 -14.22,18.31 -14.09,18.43 -14.01,18.56 -13.99,18.7 -14.01,18.84 -14.09,18.97 -14.22,19.09 -14.4,19.2 -16,20 -16.21,20.09 -16.46,20.15 -16.72,20.19 -17,20.21 -17.28,20.19 -17.54,20.15 -17.79,20.09 -18,20 -22,18 -22.18,17.89 -22.31,17.77 -22.39,17.64 -22.41,17.5 -22.39,17.36 -22.31,17.23 -22.18,17.11 -22,17 -20.4,16.2 -20.19,16.11 -19.94,16.05 -19.68,16.01 -19.4,15.99 -19.12,16.01 -18.86,16.05 -18.61,16.11 -18.4,16.2"/>
      <polygon class="hln-card-terminal-tap-l" points="-6.4,22.2 -6.22,22.31 -6.09,22.43 -6.01,22.56 -5.99,22.7 -6.01,22.84 -6.09,22.97 -6.22,23.09 -6.4,23.2 -8,24 -8.21,24.09 -8.46,24.15 -8.72,24.19 -9,24.21 -9.28,24.19 -9.54,24.15 -9.79,24.09 -10,24 -14,22 -14.18,21.89 -14.31,21.77 -14.39,21.64 -14.41,21.5 -14.39,21.36 -14.31,21.23 -14.18,21.11 -14,21 -12.4,20.2 -12.19,20.11 -11.94,20.05 -11.68,20.01 -11.4,19.99 -11.12,20.01 -10.86,20.05 -10.61,20.11 -10.4,20.2"/>
      <polygon class="hln-card-terminal-tap-l" points="-27.8,16.9 -27.62,17.01 -27.49,17.13 -27.41,17.26 -27.39,17.4 -27.41,17.54 -27.49,17.67 -27.62,17.79 -27.8,17.9 -29.4,18.7 -29.61,18.79 -29.86,18.85 -30.12,18.89 -30.4,18.91 -30.68,18.89 -30.94,18.85 -31.19,18.79 -31.4,18.7 -35.4,16.7 -35.58,16.59 -35.71,16.47 -35.79,16.34 -35.81,16.2 -35.79,16.06 -35.71,15.93 -35.58,15.81 -35.4,15.7 -33.8,14.9 -33.59,14.81 -33.34,14.75 -33.08,14.71 -32.8,14.69 -32.52,14.71 -32.26,14.75 -32.01,14.81 -31.8,14.9"/>
      <polygon class="hln-card-terminal-tap-l" points="-19.8,20.9 -19.62,21.01 -19.49,21.13 -19.41,21.26 -19.39,21.4 -19.41,21.54 -19.49,21.67 -19.62,21.79 -19.8,21.9 -21.4,22.7 -21.61,22.79 -21.86,22.85 -22.12,22.89 -22.4,22.91 -22.68,22.89 -22.94,22.85 -23.19,22.79 -23.4,22.7 -27.4,20.7 -27.58,20.59 -27.71,20.47 -27.79,20.34 -27.81,20.2 -27.79,20.06 -27.71,19.93 -27.58,19.81 -27.4,19.7 -25.8,18.9 -25.59,18.81 -25.34,18.75 -25.08,18.71 -24.8,18.69 -24.52,18.71 -24.26,18.75 -24.01,18.81 -23.8,18.9"/>
      <polygon class="hln-card-terminal-tap-l" points="-11.8,24.9 -11.62,25.01 -11.49,25.13 -11.41,25.26 -11.39,25.4 -11.41,25.54 -11.49,25.67 -11.62,25.79 -11.8,25.9 -13.4,26.7 -13.61,26.79 -13.86,26.85 -14.12,26.89 -14.4,26.91 -14.68,26.89 -14.94,26.85 -15.19,26.79 -15.4,26.7 -19.4,24.7 -19.58,24.59 -19.71,24.47 -19.79,24.34 -19.81,24.2 -19.79,24.06 -19.71,23.93 -19.58,23.81 -19.4,23.7 -17.8,22.9 -17.59,22.81 -17.34,22.75 -17.08,22.71 -16.8,22.69 -16.52,22.71 -16.26,22.75 -16.01,22.81 -15.8,22.9"/>
      <polygon class="hln-card-terminal-tap-l" points="-33.2,19.6 -33.02,19.71 -32.89,19.83 -32.81,19.96 -32.79,20.1 -32.81,20.24 -32.89,20.37 -33.02,20.49 -33.2,20.6 -34.8,21.4 -35.01,21.49 -35.26,21.55 -35.52,21.59 -35.8,21.61 -36.08,21.59 -36.34,21.55 -36.59,21.49 -36.8,21.4 -40.8,19.4 -40.98,19.29 -41.11,19.17 -41.19,19.04 -41.21,18.9 -41.19,18.76 -41.11,18.63 -40.98,18.51 -40.8,18.4 -39.2,17.6 -38.99,17.51 -38.74,17.45 -38.48,17.41 -38.2,17.39 -37.92,17.41 -37.66,17.45 -37.41,17.51 -37.2,17.6"/>
      <polygon class="hln-card-terminal-tap-l" points="-25.2,23.6 -25.02,23.71 -24.89,23.83 -24.81,23.96 -24.79,24.1 -24.81,24.24 -24.89,24.37 -25.02,24.49 -25.2,24.6 -26.8,25.4 -27.01,25.49 -27.26,25.55 -27.52,25.59 -27.8,25.61 -28.08,25.59 -28.34,25.55 -28.59,25.49 -28.8,25.4 -32.8,23.4 -32.98,23.29 -33.11,23.17 -33.19,23.04 -33.21,22.9 -33.19,22.76 -33.11,22.63 -32.98,22.51 -32.8,22.4 -31.2,21.6 -30.99,21.51 -30.74,21.45 -30.48,21.41 -30.2,21.39 -29.92,21.41 -29.66,21.45 -29.41,21.51 -29.2,21.6"/>
      <polygon class="hln-card-terminal-tap-l" points="-17.2,27.6 -17.02,27.71 -16.89,27.83 -16.81,27.96 -16.79,28.1 -16.81,28.24 -16.89,28.37 -17.02,28.49 -17.2,28.6 -18.8,29.4 -19.01,29.49 -19.26,29.55 -19.52,29.59 -19.8,29.61 -20.08,29.59 -20.34,29.55 -20.59,29.49 -20.8,29.4 -24.8,27.4 -24.98,27.29 -25.11,27.17 -25.19,27.04 -25.21,26.9 -25.19,26.76 -25.11,26.63 -24.98,26.51 -24.8,26.4 -23.2,25.6 -22.99,25.51 -22.74,25.45 -22.48,25.41 -22.2,25.39 -21.92,25.41 -21.66,25.45 -21.41,25.51 -21.2,25.6"/>
      <g transform="matrix(1 .5 -1 .5 3 7.5)"><g class="hln-card-terminal-tap-nfc hln-card-terminal-tap-l"><path class="hln-card-terminal-tap-o" d="M2.29,-1.93 A3,3 0 0 1 2.29,1.93"/><path class="hln-card-terminal-tap-o" d="M3.82,-3.22 A5,5 0 0 1 3.82,3.22"/><path class="hln-card-terminal-tap-o" d="M5.35,-4.51 A7,7 0 0 1 5.35,4.51"/></g><g class="hln-card-terminal-tap-ok"><polyline class="hln-card-terminal-tap-a" points="-3.6,-1.2 -1,1.8 4,-3.8"/></g></g>
      <g class="hln-card-terminal-tap-card"><g><polygon points="-22.83,-8 -22.77,-8.28 -22.61,-8.54 -22.35,-8.79 -22,-9 -5,-17.5 -4.57,-17.68 -4.08,-17.81 -3.55,-17.89 -3,-17.91 -2.45,-17.89 -1.92,-17.81 -1.43,-17.68 -1,-17.5 29,-2.5 29.35,-2.29 29.61,-2.04 29.77,-1.78 29.83,-1.5 29.83,-0.5 29.77,-0.22 29.61,0.04 29.35,0.29 29,0.5 12,9 11.57,9.18 11.08,9.31 10.55,9.39 10,9.41 9.45,9.39 8.92,9.31 8.43,9.18 8,9 -22,-6 -22.35,-6.21 -22.61,-6.46 -22.77,-6.72 -22.83,-7"/><polygon points="29,-2.5 29.35,-2.29 29.61,-2.04 29.77,-1.78 29.83,-1.5 29.77,-1.22 29.61,-0.96 29.35,-0.71 29,-0.5 12,8 11.57,8.18 11.08,8.31 10.55,8.39 10,8.41 9.45,8.39 8.92,8.31 8.43,8.18 8,8 -22,-7 -22.35,-7.21 -22.61,-7.46 -22.77,-7.72 -22.83,-8 -22.77,-8.28 -22.61,-8.54 -22.35,-8.79 -22,-9 -5,-17.5 -4.57,-17.68 -4.08,-17.81 -3.55,-17.89 -3,-17.91 -2.45,-17.89 -1.92,-17.81 -1.43,-17.68 -1,-17.5"/></g><polygon class="hln-card-terminal-tap-l" points="3,-11.5 3.18,-11.39 3.31,-11.27 3.39,-11.14 3.41,-11 3.39,-10.86 3.31,-10.73 3.18,-10.61 3,-10.5 0.4,-9.2 0.19,-9.11 -0.06,-9.05 -0.32,-9.01 -0.6,-8.99 -0.88,-9.01 -1.14,-9.05 -1.39,-9.11 -1.6,-9.2 -5.6,-11.2 -5.78,-11.31 -5.91,-11.43 -5.99,-11.56 -6.01,-11.7 -5.99,-11.84 -5.91,-11.97 -5.78,-12.09 -5.6,-12.2 -3,-13.5 -2.79,-13.59 -2.54,-13.65 -2.28,-13.69 -2,-13.71 -1.72,-13.69 -1.46,-13.65 -1.21,-13.59 -1,-13.5"/><line class="hln-card-terminal-tap-l" x1="-11.5" y1="-9.25" x2="10.5" y2="1.75"/><line class="hln-card-terminal-tap-l" x1="-14" y1="-8" x2="-2" y2="-2"/></g>
    </g>
  </svg>
</div>

CSS

.hln-card-terminal-tap {
  --c: var(--hln-color, #ff4f2e);
  font-size: var(--hln-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 22em;
  height: 12em;
  border-radius: 0.75em;
  background: #f6f5f1;
  overflow: hidden;
}
.hln-card-terminal-tap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-card-terminal-tap svg * {
  vector-effect: non-scaling-stroke;
}
.hln-card-terminal-tap polyline,
.hln-card-terminal-tap .hln-card-terminal-tap-o {
  fill: none;
}
.hln-card-terminal-tap .hln-card-terminal-tap-l {
  stroke: #9a9ca3;
}
.hln-card-terminal-tap .hln-card-terminal-tap-a {
  stroke: var(--c);
}
.hln-card-terminal-tap .hln-card-terminal-tap-card {
  transform: matrix(1, 0, 0, 1, 36, 12); opacity: 0;
  animation: hln-card-terminal-tap-card 6s infinite;
}
.hln-card-terminal-tap .hln-card-terminal-tap-ok {
  animation: hln-card-terminal-tap-ok 6s infinite;
}
.hln-card-terminal-tap .hln-card-terminal-tap-nfc {
  opacity: 0;
  animation: hln-card-terminal-tap-nfc 6s infinite;
}
@keyframes hln-card-terminal-tap-card {
  0% { transform: matrix(1, 0, 0, 1, 36, 12); opacity: 0; }
  5% { transform: matrix(1, 0, 0, 1, 36, 12); opacity: 0; animation-timing-function: linear(0, 0.031, 0.107, 0.208, 0.321, 0.434, 0.541, 0.639, 0.724, 0.796, 0.855, 0.903, 0.94, 0.968, 0.988, 1.002, 1.011, 1.017, 1.019, 1.02, 1.019, 1.018, 1.016, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.003, 1.002, 1.001, 1); }
  21.67% { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; }
  24.17% { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; animation-timing-function: cubic-bezier(.55,0,.85,.3); }
  27.5% { transform: matrix(1, 0, 0, 1, 0, 5); opacity: 1; animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  38.33% { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; }
  40.83% { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  51.67% { transform: matrix(1, 0, 0, 1, 36, 12); opacity: 0; }
  100% { transform: matrix(1, 0, 0, 1, 36, 12); opacity: 0; }
}
@keyframes hln-card-terminal-tap-ok {
  0% { transform: scale(0); opacity: 0; }
  48.33% { transform: scale(0); opacity: 0; animation-timing-function: linear(0, 0.035, 0.125, 0.247, 0.384, 0.524, 0.655, 0.771, 0.87, 0.948, 1.008, 1.05, 1.077, 1.091, 1.095, 1.091, 1.083, 1.071, 1.058, 1.045, 1.032, 1.021, 1.012, 1.005, 0.999, 0.995, 0.993, 0.991, 0.991, 0.991, 0.992, 0.993, 1); }
  60% { transform: scale(1); opacity: 1; }
  88.33% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  93.33% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes hln-card-terminal-tap-nfc {
  0% { opacity: 1; }
  43.33% { opacity: 1; }
  46.67% { opacity: 0; }
  93.33% { opacity: 0; }
  98.33% { opacity: 1; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hln-card-terminal-tap * {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-card-terminal-tap, .hln-card-terminal-tap *, .hln-card-terminal-tap::before, .hln-card-terminal-tap::after, .hln-card-terminal-tap *::before, .hln-card-terminal-tap *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --hln-color on the element or a parent. Currently previewing #3b82f6.
  • Base size: set --hln-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar hairline animations

Laptop Lid Opening
Phone Notification Card
Server Blade Slide Out
Mechanical Keyboard Typing