flip.css 891 B

12345678910111213141516171819202122232425262728293031323334
  1. @keyframes flip {
  2. from {
  3. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
  4. animation-timing-function: ease-out;
  5. }
  6. 40% {
  7. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
  8. rotate3d(0, 1, 0, -190deg);
  9. animation-timing-function: ease-out;
  10. }
  11. 50% {
  12. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
  13. rotate3d(0, 1, 0, -170deg);
  14. animation-timing-function: ease-in;
  15. }
  16. 80% {
  17. transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
  18. rotate3d(0, 1, 0, 0deg);
  19. animation-timing-function: ease-in;
  20. }
  21. to {
  22. transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
  23. animation-timing-function: ease-in;
  24. }
  25. }
  26. .animated.flip {
  27. backface-visibility: visible;
  28. animation-name: flip;
  29. }