hinge.css 495 B

1234567891011121314151617181920212223242526272829
  1. @keyframes hinge {
  2. 0% {
  3. animation-timing-function: ease-in-out;
  4. }
  5. 20%,
  6. 60% {
  7. transform: rotate3d(0, 0, 1, 80deg);
  8. animation-timing-function: ease-in-out;
  9. }
  10. 40%,
  11. 80% {
  12. transform: rotate3d(0, 0, 1, 60deg);
  13. animation-timing-function: ease-in-out;
  14. opacity: 1;
  15. }
  16. to {
  17. transform: translate3d(0, 700px, 0);
  18. opacity: 0;
  19. }
  20. }
  21. .hinge {
  22. animation-duration: calc(var(--animate-duration) * 2);
  23. animation-name: hinge;
  24. transform-origin: top left;
  25. }