formstone/src/css/checkpoint.css

Library of modular front end components.

.fs-checkpoint {
  --fs-checkpoint-duration: 0.5s;
  --fs-checkpoint-offset: 50px;
  --fs-checkpoint-scale-in: 0.5;
  --fs-checkpoint-scale-out: 1.25;
  --fs-checkpoint-rotate: 90deg;
  --fs-checkpoint-perspective: 3000px;
}

@media (prefers-reduced-motion) {
  .fs-checkpoint {
    --fs-checkpoint-duration: 0s;
  }
}

[data-checkpoint-animation="fade-in"],
[data-checkpoint-animation="fade-up"],
[data-checkpoint-animation="fade-down"],
[data-checkpoint-animation="fade-left"],
[data-checkpoint-animation="fade-right"] {
  opacity: 0;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

[data-checkpoint-animation="fade-in"].fs-checkpoint-active,
[data-checkpoint-animation="fade-up"].fs-checkpoint-active,
[data-checkpoint-animation="fade-down"].fs-checkpoint-active,
[data-checkpoint-animation="fade-left"].fs-checkpoint-active,
[data-checkpoint-animation="fade-right"].fs-checkpoint-active {
  opacity: 1;
}

[data-checkpoint-animation="fade-up"] {
  transform: translateY(var(--fs-checkpoint-offset));
}

[data-checkpoint-animation="fade-down"] {
  transform: translateY(calc(var(--fs-checkpoint-offset) * -1));
}

[data-checkpoint-animation="fade-up"].fs-checkpoint-active,
[data-checkpoint-animation="fade-down"].fs-checkpoint-active {
  transform: translateY(0);
}

[data-checkpoint-animation="fade-left"] {
  transform: translateX(calc(var(--fs-checkpoint-offset) * -1));
}

[data-checkpoint-animation="fade-right"] {
  transform: translateX(var(--fs-checkpoint-offset));
}

[data-checkpoint-animation="fade-left"].fs-checkpoint-active,
[data-checkpoint-animation="fade-right"].fs-checkpoint-active {
  transform: translateX(0);
}

[data-checkpoint-animation="zoom-in"],
[data-checkpoint-animation="zoom-in-up"],
[data-checkpoint-animation="zoom-in-down"],
[data-checkpoint-animation="zoom-in-left"],
[data-checkpoint-animation="zoom-in-right"] {
  opacity: 0;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

[data-checkpoint-animation="zoom-in"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-in-up"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-in-down"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-in-left"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-in-right"].fs-checkpoint-active {
  opacity: 1;
}

[data-checkpoint-animation="zoom-in"] {
  transform: translateY(0) scale(var(--fs-checkpoint-scale-in));
}

[data-checkpoint-animation="zoom-in-up"] {
  transform: translateY(var(--fs-checkpoint-offset)) scale(var(--fs-checkpoint-scale-in));
}

[data-checkpoint-animation="zoom-in-down"] {
  transform: translateY(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--fs-checkpoint-scale-in));
}

[data-checkpoint-animation="zoom-in"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-in-up"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-in-down"].fs-checkpoint-active {
  transform: translateY(0) scale(1);
}

[data-checkpoint-animation="zoom-in-left"] {
  transform: translateX(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--fs-checkpoint-scale-in));
}

[data-checkpoint-animation="zoom-in-right"] {
  transform: translateX(var(--fs-checkpoint-offset)) scale(var(--fs-checkpoint-scale-in));
}

[data-checkpoint-animation="zoom-in-left"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-in-right"].fs-checkpoint-active {
  transform: translateX(0) scale(1);
}

[data-checkpoint-animation="zoom-out"],
[data-checkpoint-animation="zoom-out-up"],
[data-checkpoint-animation="zoom-out-down"],
[data-checkpoint-animation="zoom-out-left"],
[data-checkpoint-animation="zoom-out-right"] {
  opacity: 0;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

[data-checkpoint-animation="zoom-out"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-out-up"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-out-down"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-out-left"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-out-right"].fs-checkpoint-active {
  opacity: 1;
}

[data-checkpoint-animation="zoom-out"] {
  transform: translateY(0) scale(var(--fs-checkpoint-scale-out));
}

[data-checkpoint-animation="zoom-out-up"] {
  transform: translateY(var(--fs-checkpoint-offset)) scale(var(--fs-checkpoint-scale-out));
}

[data-checkpoint-animation="zoom-out-down"] {
  transform: translateY(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--fs-checkpoint-scale-out));
}

[data-checkpoint-animation="zoom-out"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-out-up"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-out-down"].fs-checkpoint-active {
  transform: translateY(0) scale(1);
}

[data-checkpoint-animation="zoom-out-left"] {
  transform: translateX(calc(var(--fs-checkpoint-offset) * -1)) scale(var(--fs-checkpoint-scale-out));
}

[data-checkpoint-animation="zoom-out-right"] {
  transform: translateX(var(--fs-checkpoint-offset)) scale(var(--fs-checkpoint-scale-out));
}

[data-checkpoint-animation="zoom-out-left"].fs-checkpoint-active,
[data-checkpoint-animation="zoom-out-right"].fs-checkpoint-active {
  transform: translateX(0) scale(1);
}

[data-checkpoint-animation="flip-up"],
[data-checkpoint-animation="flip-down"],
[data-checkpoint-animation="flip-left"],
[data-checkpoint-animation="flip-right"] {
  backface-visibility: hidden;
  transition: opacity var(--fs-checkpoint-duration) linear, transform var(--fs-checkpoint-duration) ease;
}

[data-checkpoint-animation="flip-up"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateX(calc(var(--fs-checkpoint-rotate) * -1));
}

[data-checkpoint-animation="flip-down"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateX(var(--fs-checkpoint-rotate));
}

[data-checkpoint-animation="flip-up"].fs-checkpoint-active,
[data-checkpoint-animation="flip-down"].fs-checkpoint-active {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateX(0);
}

[data-checkpoint-animation="flip-left"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateY(var(--fs-checkpoint-rotate));
}

[data-checkpoint-animation="flip-right"] {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateY(calc(var(--fs-checkpoint-rotate) * -1));
}

[data-checkpoint-animation="flip-left"].fs-checkpoint-active,
[data-checkpoint-animation="flip-right"].fs-checkpoint-active {
  transform: perspective(var(--fs-checkpoint-perspective)) rotateY(0);
}