hinge.css

TLDR

The hinge.css file contains CSS animations for applying a "hinge" effect to an element. It includes a keyframes animation called hinge and a CSS class called .hinge.

Methods

None

Classes

.hinge

The .hinge class applies the "hinge" animation to an element. It sets the following CSS properties:

• animation-duration: The duration of the animation, calculated based on the value of a CSS variable --animate-duration multiplied by 2.
• animation-name: The name of the animation, which is hinge.
• transform-origin: Sets the origin point of the transformation to the top left corner of the element.

@keyframes hinge {
  0% {
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    transform: rotate3d(0, 0, 1, 80deg);
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    transform: rotate3d(0, 0, 1, 60deg);
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  animation-duration: calc(var(--animate-duration) * 2);
  animation-name: hinge;
  transform-origin: top left;
}