Switch that snaps back

Variant: Snap-back

A toggle that travels two thirds of the way on, hits friction, holds dead for 117ms, and returns — overshooting 2px past home before settling. The hold is the whole animation: remove it and the knob reads as a bounce instead of a refusal. The return is faster than the push, because the hand was deliberate and the system's answer should not be. Use it for a permission the user is not allowed to grant.

erroraccesscontrol

The source

A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Rejection — the switch that snaps back</title>
    <style>
      :root {
        --ivory: #faf9f5;
        --slate: #141413;
        --oat: #e3dacc;
        --rust: #b04a3f;
        --paper: #ffffff;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      }

      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: var(--ivory);
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          sans-serif;
        color: var(--slate);
      }

      .switch {
        position: relative;
        width: 68px;
        height: 36px;
      }

      .track {
        position: absolute;
        inset: 0;
        border-radius: 18px;
        background: var(--oat);
      }

      /* Rust washed over the track rather than a colour swap, so the tint and
         the recoil are the same event seen twice — one in motion, one in hue. */
      .track.err {
        background: var(--rust);
        opacity: 0;
        animation: track-tint 2.6s infinite;
      }

      .knob {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--paper);
        box-shadow: 0 1px 2px rgba(20, 20, 19, 0.22);
        animation: refuse 2.6s infinite;
      }

      /* The whole gesture runs 500ms, which only makes sense because it is a
         staged interaction rather than one transition: push (182ms), friction
         (91ms), the dead beat of refusal (117ms), snap home (130ms). Every
         phase is inside the UI budget; the beat between them is the meaning.
         Drop the hold and the knob reads as a bounce, not as a no. */
      @keyframes refuse {
        0%,
        16% {
          transform: translateX(0);
          animation-timing-function: var(--ease-out);
        }
        23% {
          transform: translateX(20px);
          animation-timing-function: var(--ease-out);
        }
        /* friction into the stop, never a wall — real things slow first */
        26.5%,
        31% {
          transform: translateX(23px);
          animation-timing-function: var(--ease-out);
        }
        /* returns 2px past home, then settles — the system answers faster
           than the hand asked */
        36% {
          transform: translateX(-2px);
          animation-timing-function: var(--ease-out);
        }
        39.5%,
        100% {
          transform: translateX(0);
        }
      }

      @keyframes track-tint {
        0%,
        23% {
          opacity: 0;
        }
        27%,
        58% {
          opacity: 0.22;
        }
        68%,
        100% {
          opacity: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        /* Travel out, colour kept — the refusal still happens, it just no
           longer throws the knob across the track and back. */
        .knob {
          animation: none;
        }

        .track.err {
          animation: track-tint-calm 2.6s ease infinite;
        }

        @keyframes track-tint-calm {
          0%,
          20% {
            opacity: 0;
          }
          30%,
          58% {
            opacity: 0.22;
          }
          72%,
          100% {
            opacity: 0;
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="switch" role="img" aria-label="Toggle refusing to turn on">
      <div class="track"></div>
      <div class="track err"></div>
      <div class="knob"></div>
    </div>
  </body>
</html>

The variant family

Same idea, one axis moved. Compare them side by side before you commit.

Field flash, no travel

Colour flash

Field shake, damped

Damped shake