Camera Shutter Blink

<div class="hln-camera-shutter" role="img" aria-label="A camera shutter closing and opening">
  <svg viewBox="-110 -60 220 120" aria-hidden="true">
    <g transform="translate(-18.2 -3.7) scale(1.07)">
      <g><polygon points="-21.66,-22 -21.55,-22.55 -21.23,-23.08 -20.7,-23.57 -20,-24 -4,-32 -3.14,-32.35 -2.16,-32.61 -1.1,-32.77 0,-32.83 1.1,-32.77 2.16,-32.61 3.14,-32.35 4,-32 54,-7 54.7,-6.57 55.23,-6.08 55.55,-5.55 55.66,-5 55.66,29 55.55,29.55 55.23,30.08 54.7,30.57 54,31 38,39 37.14,39.35 36.16,39.61 35.1,39.77 34,39.83 32.9,39.77 31.84,39.61 30.86,39.35 30,39 -20,14 -20.7,13.57 -21.23,13.08 -21.55,12.55 -21.66,12"/><polygon points="54,-7 54.7,-6.57 55.23,-6.08 55.55,-5.55 55.66,-5 55.55,-4.45 55.23,-3.92 54.7,-3.43 54,-3 38,5 37.14,5.35 36.16,5.61 35.1,5.77 34,5.83 32.9,5.77 31.84,5.61 30.86,5.35 30,5 -20,-20 -20.7,-20.43 -21.23,-20.92 -21.55,-21.45 -21.66,-22 -21.55,-22.55 -21.23,-23.08 -20.7,-23.57 -20,-24 -4,-32 -3.14,-32.35 -2.16,-32.61 -1.1,-32.77 0,-32.83 1.1,-32.77 2.16,-32.61 3.14,-32.35 4,-32"/></g>
      <g><polygon points="-8.83,-25 -8.77,-25.28 -8.61,-25.54 -8.35,-25.79 -8,-26 2,-31 2.43,-31.18 2.92,-31.31 3.45,-31.39 4,-31.41 4.55,-31.39 5.08,-31.31 5.57,-31.18 6,-31 19,-24.5 19.35,-24.29 19.61,-24.04 19.77,-23.78 19.83,-23.5 19.83,-18.5 19.77,-18.22 19.61,-17.96 19.35,-17.71 19,-17.5 9,-12.5 8.57,-12.32 8.08,-12.19 7.55,-12.11 7,-12.09 6.45,-12.11 5.92,-12.19 5.43,-12.32 5,-12.5 -8,-19 -8.35,-19.21 -8.61,-19.46 -8.77,-19.72 -8.83,-20"/><polygon points="19,-24.5 19.35,-24.29 19.61,-24.04 19.77,-23.78 19.83,-23.5 19.77,-23.22 19.61,-22.96 19.35,-22.71 19,-22.5 9,-17.5 8.57,-17.32 8.08,-17.19 7.55,-17.11 7,-17.09 6.45,-17.11 5.92,-17.19 5.43,-17.32 5,-17.5 -8,-24 -8.35,-24.21 -8.61,-24.46 -8.77,-24.72 -8.83,-25 -8.77,-25.28 -8.61,-25.54 -8.35,-25.79 -8,-26 2,-31 2.43,-31.18 2.92,-31.31 3.45,-31.39 4,-31.41 4.55,-31.39 5.08,-31.31 5.57,-31.18 6,-31"/></g>
      <polygon class="hln-camera-shutter-l" points="14,-24 14.18,-23.89 14.31,-23.77 14.39,-23.64 14.41,-23.5 14.39,-23.36 14.31,-23.23 14.18,-23.11 14,-23 8,-20 7.79,-19.91 7.54,-19.85 7.28,-19.81 7,-19.79 6.72,-19.81 6.46,-19.85 6.21,-19.91 6,-20 -3,-24.5 -3.18,-24.61 -3.31,-24.73 -3.39,-24.86 -3.41,-25 -3.39,-25.14 -3.31,-25.27 -3.18,-25.39 -3,-25.5 3,-28.5 3.21,-28.59 3.46,-28.65 3.72,-28.69 4,-28.71 4.28,-28.69 4.54,-28.65 4.79,-28.59 5,-28.5"/>
      <g><path d="M23.34,-13.1 V-11.5 A5.66,2.83 0 0 0 34.66,-11.5 V-13.1 Z"/><ellipse cx="29" cy="-13.1" rx="5.66" ry="2.83"/></g>
      <line class="hln-camera-shutter-l" x1="33.1" y1="-12.55" x2="34.46" y2="-12.37"/>
      <line class="hln-camera-shutter-l" x1="32.39" y1="-11.82" x2="33.52" y2="-11.4"/>
      <line class="hln-camera-shutter-l" x1="31.19" y1="-11.28" x2="31.91" y2="-10.68"/>
      <line class="hln-camera-shutter-l" x1="29.66" y1="-11" x2="29.88" y2="-10.31"/>
      <line class="hln-camera-shutter-l" x1="28.05" y1="-11.03" x2="27.73" y2="-10.34"/>
      <line class="hln-camera-shutter-l" x1="26.57" y1="-11.36" x2="25.76" y2="-10.78"/>
      <g class="hln-camera-shutter-btn"><g><path d="M34.76,-7.9 V-5.5 A4.24,2.12 0 0 0 43.24,-5.5 V-7.9 Z"/><ellipse class="hln-camera-shutter-af" cx="39" cy="-7.9" rx="4.24" ry="2.12"/></g></g>
      <g transform="matrix(1 .5 0 -1 -24 12)"><rect class="hln-camera-shutter-l" x="5" y="26" width="9" height="4.5" rx="1"/></g>
      <g><polygon points="-19.5,9.25 -19.45,8.18 -19.31,7.17 -19.07,6.23 -18.75,5.35 -18.33,4.55 -17.83,3.84 -17.24,3.21 -16.58,2.68 -15.84,2.24 -3.84,-3.76 -3.03,-4.09 -2.17,-4.32 -1.25,-4.45 -0.28,-4.47 0.72,-4.38 1.76,-4.19 2.83,-3.9 3.91,-3.5 5,-3 6.09,-2.41 7.17,-1.72 8.24,-0.96 9.28,-0.11 10.28,0.81 11.25,1.8 12.17,2.85 13.03,3.94 13.84,5.08 14.58,6.25 15.24,7.45 15.83,8.66 16.33,9.88 16.75,11.1 17.07,12.3 17.31,13.48 17.45,14.64 17.5,15.75 17.45,16.82 17.31,17.83 17.07,18.77 16.75,19.65 16.33,20.45 15.83,21.16 15.24,21.79 14.58,22.32 13.84,22.76 1.84,28.76 1.03,29.09 0.17,29.32 -0.75,29.45 -1.72,29.47 -2.72,29.38 -3.76,29.19 -4.83,28.9 -5.91,28.5 -7,28 -8.09,27.41 -9.17,26.72 -10.24,25.96 -11.28,25.11 -12.28,24.19 -13.25,23.2 -14.17,22.15 -15.03,21.06 -15.84,19.92 -16.58,18.75 -17.24,17.55 -17.83,16.34 -18.33,15.12 -18.75,13.9 -19.07,12.7 -19.31,11.52 -19.45,10.36"/></g>
      <g transform="matrix(1 .5 0 -1 -7 15.5)"><circle cx="0" cy="0" r="12.5"/><circle class="hln-camera-shutter-l" cx="0" cy="0" r="11"/><circle cx="0" cy="0" r="9"/><clipPath id="hln-camera-shutter-glass"><circle cx="0" cy="0" r="9"/></clipPath><g clip-path="url(#hln-camera-shutter-glass)"><g class="hln-camera-shutter-iris"><line x1="1" y1="-8" x2="1" y2="8"/><line x1="7.43" y1="-3.13" x2="-6.43" y2="4.87"/><line x1="6.43" y1="4.87" x2="-7.43" y2="-3.13"/><line x1="-1" y1="8" x2="-1" y2="-8"/><line x1="-7.43" y1="3.13" x2="6.43" y2="-4.87"/><line x1="-6.43" y1="-4.87" x2="7.43" y2="3.13"/></g></g></g>
    </g>
  </svg>
</div>

.hln-camera-shutter {
  --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-camera-shutter svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-camera-shutter svg * {
  vector-effect: non-scaling-stroke;
}
.hln-camera-shutter .hln-camera-shutter-l {
  stroke: #9a9ca3;
}
.hln-camera-shutter .hln-camera-shutter-af {
  fill: var(--c);
  stroke: var(--c);
}
.hln-camera-shutter .hln-camera-shutter-iris {
  transform: rotate(0deg) scale(9.4);
  animation: hln-camera-shutter-iris 4s infinite;
}
.hln-camera-shutter .hln-camera-shutter-btn {
  animation: hln-camera-shutter-btn 4s infinite;
}
@keyframes hln-camera-shutter-btn {
  0% { transform: matrix(1, 0, 0, 1, 0, 0); }
  17.5% { transform: matrix(1, 0, 0, 1, 0, 0); animation-timing-function: cubic-bezier(.55,0,.85,.3); }
  20% { transform: matrix(1, 0, 0, 1, 0, 1); }
  23.75% { transform: matrix(1, 0, 0, 1, 0, 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); }
  37.5% { transform: matrix(1, 0, 0, 1, 0, 0); }
  100% { transform: matrix(1, 0, 0, 1, 0, 0); }
}
@keyframes hln-camera-shutter-iris {
  0% { transform: rotate(0deg) scale(9.4); }
  21.25% { transform: rotate(0deg) scale(9.4); animation-timing-function: cubic-bezier(.55,0,.85,.3); }
  27.5% { transform: rotate(34deg) scale(2.2); }
  31.25% { transform: rotate(34deg) scale(2.2); 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); }
  55% { transform: rotate(0deg) scale(9.4); }
  100% { transform: rotate(0deg) scale(9.4); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-camera-shutter * {
    animation: none !important;
  }
}

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

Similar hairline animations