hinge.css 502 B

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