AI CSS Animations

Parking Garage Entry

An accent car rolls up to the booth, the striped barrier arm swings up in true isometric, and the car eases into the open bay of a hairline parking garage before the arm drops.

Also known as: parking animation, isometric car animation, hairline animation.

HTML

<div class="hln-parking-gate" role="img" aria-label="A car passes a barrier and parks in a garage"><svg viewBox="-48 -12.64 116 63.27" aria-hidden="true"><g><polygon points="-76,8 24,58 24,56.5 -76,6.5"/><polygon points="70,35 24,58 24,56.5 70,33.5"/><polygon points="-30,-16.5 70,33.5 24,56.5 -76,6.5"/></g><line x1="-47" y1="-2" x2="-44" y2="-0.5" class="hln-parking-gate-l"/><line x1="-41" y1="1" x2="-38" y2="2.5" class="hln-parking-gate-l"/><line x1="-35" y1="4" x2="-32" y2="5.5" class="hln-parking-gate-l"/><line x1="-29" y1="7" x2="-26" y2="8.5" class="hln-parking-gate-l"/><line x1="-23" y1="10" x2="-20" y2="11.5" class="hln-parking-gate-l"/><line x1="-17" y1="13" x2="-14" y2="14.5" class="hln-parking-gate-l"/><line x1="-11" y1="16" x2="-8" y2="17.5" class="hln-parking-gate-l"/><line x1="-5" y1="19" x2="-2" y2="20.5" class="hln-parking-gate-l"/><line x1="1" y1="22" x2="4" y2="23.5" class="hln-parking-gate-l"/><line x1="29" y1="18" x2="59" y2="33" class="hln-parking-gate-l"/><line x1="17" y1="24" x2="47" y2="39" class="hln-parking-gate-l"/><line x1="5" y1="30" x2="35" y2="45" class="hln-parking-gate-l"/><line x1="-7" y1="36" x2="23" y2="51" class="hln-parking-gate-l"/><line x1="59" y1="33" x2="23" y2="51" class="hln-parking-gate-l"/><g><polygon points="28.5,16.25 62.5,33.25 62.5,18.25 28.5,1.25"/><polygon points="64,32.5 62.5,33.25 62.5,18.25 64,17.5"/><polygon points="30,0.5 64,17.5 62.5,18.25 28.5,1.25"/></g><g><polygon points="23,53 24.5,53.75 24.5,38.75 23,38"/><polygon points="65.5,33.25 24.5,53.75 24.5,38.75 65.5,18.25"/><polygon points="64,17.5 65.5,18.25 24.5,38.75 23,38"/></g><g><polygon points="31.5,28.15 44.5,34.65 44.5,31.25 31.5,24.75"/><polygon points="51.5,31.15 44.5,34.65 44.5,31.25 51.5,27.75"/><polygon points="38.5,21.25 51.5,27.75 44.5,31.25 31.5,24.75"/></g><g><polygon points="35.1,25.95 41.6,29.2 41.6,26.8 35.1,23.55"/><polygon points="47.4,26.3 41.6,29.2 41.6,26.8 47.4,23.9"/><polygon points="40.9,20.65 47.4,23.9 41.6,26.8 35.1,23.55"/></g><polygon points="35,29.5 34.97,29.26 34.9,29.02 34.78,28.77 34.62,28.53 34.43,28.32 34.22,28.14 34,28 33.78,27.91 33.57,27.88 33.38,27.91 33.22,27.99 33.1,28.12 33.03,28.29 33,28.5 33.03,28.74 33.1,28.98 33.22,29.23 33.38,29.47 33.57,29.68 33.78,29.86 34,30 34.22,30.09 34.43,30.12 34.62,30.09 34.78,30.01 34.9,29.88 34.97,29.71"/><polygon points="43,33.5 42.97,33.26 42.9,33.02 42.78,32.77 42.62,32.53 42.43,32.32 42.22,32.14 42,32 41.78,31.91 41.57,31.88 41.38,31.91 41.22,31.99 41.1,32.12 41.03,32.29 41,32.5 41.03,32.74 41.1,32.98 41.22,33.23 41.38,33.47 41.57,33.68 41.78,33.86 42,34 42.22,34.09 42.43,34.12 42.62,34.09 42.78,34.01 42.9,33.88 42.97,33.71"/><g><polygon points="16.5,7.25 50.5,24.25 50.5,22.75 16.5,5.75"/><polygon points="62.5,18.25 50.5,24.25 50.5,22.75 62.5,16.75"/><polygon points="28.5,-0.25 62.5,16.75 50.5,22.75 16.5,5.75"/></g><g><polygon points="17.5,22.75 19,23.5 19,8.5 17.5,7.75"/><polygon points="20.5,22.75 19,23.5 19,8.5 20.5,7.75"/><polygon points="19,7 20.5,7.75 19,8.5 17.5,7.75"/></g><g><polygon points="49.5,38.75 51,39.5 51,24.5 49.5,23.75"/><polygon points="52.5,38.75 51,39.5 51,24.5 52.5,23.75"/><polygon points="51,23 52.5,23.75 51,24.5 49.5,23.75"/></g><g><polygon points="1,11 7,14 7,5 1,2"/><polygon points="13,11 7,14 7,5 13,2"/><polygon points="7,-1 13,2 7,5 1,2"/></g><polygon points="2,7.5 6,9.5 6,6.5 2,4.5" class="hln-parking-gate-l"/><polygon points="12,7.5 8,9.5 8,6.5 12,4.5" class="hln-parking-gate-l"/><g><polygon points="0,2 7,5.5 7,4.5 0,1"/><polygon points="14,2 7,5.5 7,4.5 14,1"/><polygon points="7,-2.5 14,1 7,4.5 0,1"/></g><g><polygon points="-1.5,15.25 0.5,16.25 0.5,11.25 -1.5,10.25"/><polygon points="2.5,15.25 0.5,16.25 0.5,11.25 2.5,10.25"/><polygon points="0.5,9.25 2.5,10.25 0.5,11.25 -1.5,10.25"/></g><g class="hln-parking-gate-car"><g class="hln-parking-gate-a"><polygon points="19.5,34.15 32.5,40.65 32.5,37.25 19.5,30.75"/><polygon points="39.5,37.15 32.5,40.65 32.5,37.25 39.5,33.75"/><polygon points="26.5,27.25 39.5,33.75 32.5,37.25 19.5,30.75"/></g><g class="hln-parking-gate-a"><polygon points="23.1,31.95 29.6,35.2 29.6,32.8 23.1,29.55"/><polygon points="35.4,32.3 29.6,35.2 29.6,32.8 35.4,29.9"/><polygon points="28.9,26.65 35.4,29.9 29.6,32.8 23.1,29.55"/></g><polygon points="24.1,31.95 26.4,33.1 26.4,31.7 24.1,30.55"/><polygon points="27,33.4 29.1,34.45 29.1,33.05 27,32"/><polygon points="34.7,32.25 30.3,34.45 30.3,32.95 34.7,30.75"/><polygon points="23,35.5 22.97,35.26 22.9,35.02 22.78,34.77 22.62,34.53 22.43,34.32 22.22,34.14 22,34 21.78,33.91 21.57,33.88 21.38,33.91 21.22,33.99 21.1,34.12 21.03,34.29 21,34.5 21.03,34.74 21.1,34.98 21.22,35.23 21.38,35.47 21.57,35.68 21.78,35.86 22,36 22.22,36.09 22.43,36.12 22.62,36.09 22.78,36.01 22.9,35.88 22.97,35.71"/><polygon points="31,39.5 30.97,39.26 30.9,39.02 30.78,38.77 30.62,38.53 30.43,38.32 30.22,38.14 30,38 29.78,37.91 29.57,37.88 29.38,37.91 29.22,37.99 29.1,38.12 29.03,38.29 29,38.5 29.03,38.74 29.1,38.98 29.22,39.23 29.38,39.47 29.57,39.68 29.78,39.86 30,40 30.22,40.09 30.43,40.12 30.62,40.09 30.78,40.01 30.9,39.88 30.97,39.71"/></g><g><polygon points="7.5,40.15 20.5,46.65 20.5,43.25 7.5,36.75"/><polygon points="27.5,43.15 20.5,46.65 20.5,43.25 27.5,39.75"/><polygon points="14.5,33.25 27.5,39.75 20.5,43.25 7.5,36.75"/></g><g><polygon points="11.1,37.95 17.6,41.2 17.6,38.8 11.1,35.55"/><polygon points="23.4,38.3 17.6,41.2 17.6,38.8 23.4,35.9"/><polygon points="16.9,32.65 23.4,35.9 17.6,38.8 11.1,35.55"/></g><polygon points="11,41.5 10.97,41.26 10.9,41.02 10.78,40.77 10.62,40.53 10.43,40.32 10.22,40.14 10,40 9.78,39.91 9.57,39.88 9.38,39.91 9.22,39.99 9.1,40.12 9.03,40.29 9,40.5 9.03,40.74 9.1,40.98 9.22,41.23 9.38,41.47 9.57,41.68 9.78,41.86 10,42 10.22,42.09 10.43,42.12 10.62,42.09 10.78,42.01 10.9,41.88 10.97,41.71"/><polygon points="19,45.5 18.97,45.26 18.9,45.02 18.78,44.77 18.62,44.53 18.43,44.32 18.22,44.14 18,44 17.78,43.91 17.57,43.88 17.38,43.91 17.22,43.99 17.1,44.12 17.03,44.29 17,44.5 17.03,44.74 17.1,44.98 17.22,45.23 17.38,45.47 17.57,45.68 17.78,45.86 18,46 18.22,46.09 18.43,46.12 18.62,46.09 18.78,46.01 18.9,45.88 18.97,45.71"/><g transform="matrix(-1 0.5 0 -1 0.5 10.75)"><g class="hln-parking-gate-arm"><rect x="0" y="-0.5" width="14" height="1"/><line x1="2" y1="-0.5" x2="3.2" y2="0.5" class="hln-parking-gate-l"/><line x1="5" y1="-0.5" x2="6.2" y2="0.5" class="hln-parking-gate-l"/><line x1="8" y1="-0.5" x2="9.2" y2="0.5" class="hln-parking-gate-l"/><line x1="11" y1="-0.5" x2="12.2" y2="0.5" class="hln-parking-gate-l"/></g></g></svg></div>

CSS

.hln-parking-gate {
  --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;
  --u: 1px;
}
.hln-parking-gate svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: #ffffff;
  stroke: #1c1d21;
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.hln-parking-gate svg * {
  vector-effect: non-scaling-stroke;
}
.hln-parking-gate-l {
  stroke: #9a9ca3;
}
.hln-parking-gate-a {
  fill: var(--c);
}
.hln-parking-gate-car {
  animation: hln-parking-gate-car 7s linear infinite;
}
.hln-parking-gate-arm {
  transform-origin: 0 0;
  animation: hln-parking-gate-arm 7s linear infinite;
}
@keyframes hln-parking-gate-car {
  0% { opacity: 1; transform: translate(calc(var(--u) * -80), calc(var(--u) * -40)); animation-timing-function: cubic-bezier(.2, .6, .35, 1.04); }
  22%, 32% { opacity: 1; transform: translate(calc(var(--u) * -46), calc(var(--u) * -23)); animation-timing-function: cubic-bezier(.45, 0, .25, 1.05); }
  54%, 84% { opacity: 1; transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); animation-timing-function: ease-in; }
  92% { opacity: 0; transform: translate(calc(var(--u) * 0), calc(var(--u) * 0)); }
  92.1%, 100% { opacity: 1; transform: translate(calc(var(--u) * -80), calc(var(--u) * -40)); }
}
@keyframes hln-parking-gate-arm {
  0%, 22% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.3, 1.45, .5, 1); }
  30%, 54% { transform: rotate(80deg); animation-timing-function: cubic-bezier(.5, 0, .4, 1.2); }
  64%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hln-parking-gate * {
    animation-play-state: paused !important;
    animation-delay: calc(var(--delay, 0s) - 5s) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hln-parking-gate, .hln-parking-gate *, .hln-parking-gate::before, .hln-parking-gate::after, .hln-parking-gate *::before, .hln-parking-gate *::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

Parcel to Doorstep
Sorting Belt Diverter
Stamping Press Line
City Block Night Shift