animations.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. .slide-in-right-enter-active {
  2. -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  3. animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  4. }
  5. .slide-in-right-leave-active {
  6. -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
  7. animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
  8. }
  9. @-webkit-keyframes slide-in-right {
  10. 0% {
  11. -webkit-transform: translateX(1000px);
  12. transform: translateX(1000px);
  13. opacity: 0;
  14. }
  15. 100% {
  16. -webkit-transform: translateX(0);
  17. transform: translateX(0);
  18. opacity: 1;
  19. }
  20. }
  21. @keyframes slide-in-right {
  22. 0% {
  23. -webkit-transform: translateX(1000px);
  24. transform: translateX(1000px);
  25. opacity: 0;
  26. }
  27. 100% {
  28. -webkit-transform: translateX(0);
  29. transform: translateX(0);
  30. opacity: 1;
  31. }
  32. }
  33. .slide-in-top-enter-active {
  34. -webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  35. animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  36. }
  37. .slide-in-top-leave-active {
  38. -webkit-animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
  39. animation: slide-in-top 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) both reverse;
  40. }
  41. @-webkit-keyframes slide-in-top {
  42. 0% {
  43. -webkit-transform: translateY(-1000px);
  44. transform: translateY(-1000px);
  45. opacity: 0;
  46. }
  47. 100% {
  48. -webkit-transform: translateY(0);
  49. transform: translateY(0);
  50. opacity: 1;
  51. }
  52. }
  53. @keyframes slide-in-top {
  54. 0% {
  55. -webkit-transform: translateY(-1000px);
  56. transform: translateY(-1000px);
  57. opacity: 0;
  58. }
  59. 100% {
  60. -webkit-transform: translateY(0);
  61. transform: translateY(0);
  62. opacity: 1;
  63. }
  64. }