Unnecessary View Transitions

Adapted from Artur Bień's fancy reveal animations with CSS masks.

@property --segment-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

::view-transition-old(root) {
  --initial-segment-size: 100px;
  --segment-size: var(--initial-segment-size);
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000000,
    #000000 var(--segment-size),
    transparent var(--segment-size),
    transparent var(--initial-segment-size)
  );
  animation: blinds 1s;
  z-index: 2;
}

::view-transition-new(root) {
  animation: none;
  z-index: 1;
}

@keyframes blinds {
  0% {
    --segment-size: 100px;
  }
  100% {
    --segment-size: 0px;
  }
}

Back to list