Styles: Keyframes

The Handoff CSS includes a number of keyframes for use in animations and transitions.

These keyframes are defined in shared/common/_keyframes.scss

Ticker Keyframes

This definition is used in the ticker component to create a number roll effect.

Create a ticker animation

// For use in the ticker
@keyframes ticker {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

// For use in upward ticker
@keyframes tickerUp {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(0, -100%, 0);
  }
}

Blink Keyframes

This definition is used in the blink animation to create a blinking effect.

Create a blinking animation

// For use in blink animation
@keyframes blink {
  0%,
  100% {
    border-color: var(--color-primary-blue);
  }
  50% {
    border-color: transparent;
  }
}