index.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. .side-content {
  2. animation-duration: 0.2s;
  3. animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  4. }
  5. .side-content[data-side='top'] {
  6. animation-name: slide-up;
  7. }
  8. .side-content[data-side='bottom'] {
  9. animation-name: slide-down;
  10. }
  11. .side-content[data-side='left'] {
  12. animation-name: slide-left;
  13. }
  14. .side-content[data-side='right'] {
  15. animation-name: slide-right;
  16. }
  17. .breadcrumb-transition-enter-active {
  18. transition:
  19. transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
  20. opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  21. }
  22. .breadcrumb-transition-leave-active {
  23. display: none;
  24. }
  25. .breadcrumb-transition-enter-from {
  26. opacity: 0;
  27. transform: translateX(30px) skewX(-30deg);
  28. }
  29. /*
  30. .breadcrumb-transition-move,
  31. .breadcrumb-transition-enter-active {
  32. transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  33. }
  34. .breadcrumb-transition-leave-active {
  35. display: none;
  36. }
  37. .breadcrumb-transition-enter-from {
  38. opacity: 0;
  39. transform: translateX(-5px);
  40. } */
  41. @keyframes slide-down {
  42. from {
  43. opacity: 0;
  44. transform: translateY(-10px);
  45. }
  46. to {
  47. opacity: 1;
  48. transform: translateY(0);
  49. }
  50. }
  51. @keyframes slide-left {
  52. from {
  53. opacity: 0;
  54. transform: translateX(-10px);
  55. }
  56. to {
  57. opacity: 1;
  58. transform: translateX(0);
  59. }
  60. }
  61. @keyframes slide-right {
  62. from {
  63. opacity: 0;
  64. transform: translateX(-10px);
  65. }
  66. to {
  67. opacity: 1;
  68. transform: translateX(0);
  69. }
  70. }
  71. @keyframes slide-up {
  72. from {
  73. opacity: 0;
  74. transform: translateY(10px);
  75. }
  76. to {
  77. opacity: 1;
  78. transform: translateY(0);
  79. }
  80. }