Pulsar
Key

Key

CSS

A key advances into a slot and turns ninety degrees, the bit clearing the wards.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Onboarding and setup, Security and trust
Industries
SaaS and software, Security and identity
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
Key
CSS tier
Static vector
Key, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-key-title" class="pulsar pulsar-vault-key" data-pulsar="vault-key" role="img" viewBox="0 0 48 48"><title id="vault-key-title">Key</title><rect id="vault-key-slot" width="4" height="24" x="40" y="12" fill="currentColor" opacity=".3" rx="2"></rect><g id="vault-key-main"><rect id="vault-key-handle" width="12" height="12" x="0" y="18" fill="currentColor" rx="2"></rect><rect id="vault-key-shaft" width="20" height="4" x="12" y="22" fill="currentColor" rx="2"></rect><rect id="vault-key-bit" width="4" height="4" x="26" y="26" fill="currentColor" rx="1"></rect></g></svg>

animation.css

/* Accent: the key itself, against the slot it enters. */
.pulsar-vault-key #vault-key-handle,
.pulsar-vault-key #vault-key-shaft,
.pulsar-vault-key #vault-key-bit {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-key #vault-key-main {
  transform-origin: 42px 24px;
  transform-box: view-box;
  animation: vault-key-sequence 4000ms ease-in-out infinite;
}

@keyframes vault-key-sequence {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  25% {
    transform: translateX(12px) rotate(0deg);
  }
  45% {
    transform: translateX(12px) rotate(90deg);
  }
  75% {
    transform: translateX(12px) rotate(90deg);
  }
  90% {
    transform: translateX(12px) rotate(0deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-key #vault-key-main {
    animation: none;
    transform: translateX(12px) rotate(90deg);
  }
}

From this family15 in Vault

See the family