motion-elements.scss 3.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. .motion {
  2. -webkit-transition: all 0.5s ease-out;
  3. transition: all 0.5s ease-out;
  4. }
  5. .fade {
  6. opacity: 0;
  7. filter: alpha(opacity=0);
  8. -webkit-backface-visibility: hidden !important;
  9. backface-visibility: hidden !important;
  10. -webkit-transition: all 0.1s ease-out !important;
  11. transition: all 0.1s ease-out !important;
  12. }
  13. .spin-back {
  14. -webkit-backface-visibility: hidden !important;
  15. backface-visibility: hidden !important;
  16. -webkit-transform: translateZ(0) rotate(360deg) scale(0) !important;
  17. transform: translateZ(0) rotate(360deg) scale(0) !important;
  18. -webkit-transition: all 0.1s ease-out !important;
  19. transition: all 0.1s ease-out !important;
  20. }
  21. .spiral {
  22. -webkit-backface-visibility: hidden !important;
  23. backface-visibility: hidden !important;
  24. -webkit-transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
  25. transform: translateZ(0) rotate(-360deg) scale(0) translate(-120px) !important;
  26. -webkit-transition: all 0.1s ease-out !important;
  27. transition: all 0.1s ease-out !important;
  28. }
  29. .spiral-back {
  30. -webkit-backface-visibility: hidden !important;
  31. backface-visibility: hidden !important;
  32. -webkit-transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
  33. transform: translateZ(0) rotate(360deg) scale(0) translate(120px) !important;
  34. -webkit-transition: all 0.1s ease-out !important;
  35. transition: all 0.1s ease-out !important;
  36. }
  37. .menu-open .avatar {
  38. opacity: 1;
  39. filter: alpha(opacity=100);
  40. -webkit-transform: translateZ(0) rotate(0) scale(1) !important;
  41. transform: translateZ(0) rotate(0) scale(1) !important;
  42. -webkit-transition: all 0.3s ease-out !important;
  43. transition: all 0.3s ease-out !important;
  44. }
  45. .spin {
  46. -webkit-backface-visibility: hidden !important;
  47. backface-visibility: hidden !important;
  48. -webkit-transform: translateZ(0) rotate(0) scale(0) !important;
  49. transform: translateZ(0) rotate(0) scale(0) !important;
  50. -webkit-transition: all 0.3s ease-out !important;
  51. transition: all 0.3s ease-out !important;
  52. }
  53. .spin.on {
  54. -webkit-transform: translateZ(0) rotate(-360deg) scale(1) !important;
  55. transform: translateZ(0) rotate(-360deg) scale(1) !important;
  56. }
  57. .flap {
  58. -webkit-backface-visibility: hidden !important;
  59. backface-visibility: hidden !important;
  60. -webkit-transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
  61. transform: translateZ(0) rotateX(0) scale(0) translate(-120px) !important;
  62. -webkit-transition: all 0.5s ease-out !important;
  63. transition: all 0.5s ease-out !important;
  64. }
  65. .flap.on {
  66. -webkit-transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
  67. transform: translateZ(0) rotateX(-720deg) scale(1) translate(0) !important;
  68. -webkit-transition: all 0.5s ease-out !important;
  69. transition: all 0.5s ease-out !important;
  70. }
  71. .drop {
  72. -webkit-backface-visibility: hidden !important;
  73. backface-visibility: hidden !important;
  74. -webkit-transform: translateZ(0) scale(3) !important;
  75. transform: translateZ(0) scale(3) !important;
  76. -webkit-transition: all 0.5s ease-out !important;
  77. transition: all 0.5s ease-out !important;
  78. }
  79. .drop.on {
  80. -webkit-transform: translateZ(0) scale(1) !important;
  81. transform: translateZ(0) scale(1) !important;
  82. -webkit-transition: all 0.5s ease-out !important;
  83. transition: all 0.5s ease-out !important;
  84. }
  85. .flip {
  86. -webkit-backface-visibility: hidden !important;
  87. backface-visibility: hidden !important;
  88. -webkit-transform: translateZ(0) rotateY(0) scale(0) !important;
  89. transform: translateZ(0) rotateY(0) scale(0) !important;
  90. -webkit-transition: all 0.5s ease-out !important;
  91. transition: all 0.5s ease-out !important;
  92. }
  93. .flip.on {
  94. -webkit-transform: translateZ(0) rotateY(-720deg) scale(1) !important;
  95. transform: translateZ(0) rotateY(-720deg) scale(1) !important;
  96. -webkit-transition: all 0.5s ease-out !important;
  97. transition: all 0.5s ease-out !important;
  98. }