_flip.scss 912 B

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. @keyframes #{$rt-namespace}__flipIn {
  2. from {
  3. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  4. animation-timing-function: ease-in;
  5. opacity: 0;
  6. }
  7. 40% {
  8. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  9. animation-timing-function: ease-in;
  10. }
  11. 60% {
  12. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  13. opacity: 1;
  14. }
  15. 80% {
  16. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  17. }
  18. to {
  19. transform: perspective(400px);
  20. }
  21. }
  22. @keyframes #{$rt-namespace}__flipOut {
  23. from {
  24. transform: perspective(400px);
  25. }
  26. 30% {
  27. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  28. opacity: 1;
  29. }
  30. to {
  31. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  32. opacity: 0;
  33. }
  34. }
  35. .#{$rt-namespace}__flip-enter {
  36. animation-name: #{$rt-namespace}__flipIn;
  37. }
  38. .#{$rt-namespace}__flip-exit {
  39. animation-name: #{$rt-namespace}__flipOut;
  40. }