金诚优选前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

148 lines
2.2 KiB

  1. .animate__animated {
  2. animation-duration: 0.5s;
  3. animation-fill-mode: both;
  4. }
  5. @keyframes zoomIn {
  6. from {
  7. opacity: 0;
  8. -webkit-transform: scale3d(0.3, 0.3, 0.3);
  9. transform: scale3d(0.3, 0.3, 0.3);
  10. }
  11. 50% {
  12. opacity: 1;
  13. }
  14. }
  15. .animate__zoomIn {
  16. animation-name: zoomIn;
  17. }
  18. @keyframes bounce {
  19. from,
  20. 20%,
  21. 53%,
  22. to {
  23. -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  24. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  25. -webkit-transform: translate3d(0, 0, 0);
  26. transform: translate3d(0, 0, 0);
  27. }
  28. 40%,
  29. 43% {
  30. animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  31. transform: translate3d(0, -30px, 0) scaleY(1.1);
  32. }
  33. 70% {
  34. animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  35. transform: translate3d(0, -15px, 0) scaleY(1.05);
  36. }
  37. 80% {
  38. transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  39. transform: translate3d(0, 0, 0) scaleY(0.95);
  40. }
  41. 90% {
  42. transform: translate3d(0, -4px, 0) scaleY(1.02);
  43. }
  44. }
  45. .animate__bounce {
  46. animation-name: bounce;
  47. transform-origin: center bottom;
  48. }
  49. @keyframes rubberBand {
  50. from {
  51. transform: scale3d(1, 1, 1);
  52. }
  53. 30% {
  54. transform: scale3d(1.25, 0.75, 1);
  55. }
  56. 40% {
  57. transform: scale3d(0.75, 1.25, 1);
  58. }
  59. 50% {
  60. transform: scale3d(1.15, 0.85, 1);
  61. }
  62. 65% {
  63. transform: scale3d(0.95, 1.05, 1);
  64. }
  65. 75% {
  66. transform: scale3d(1.05, 0.95, 1);
  67. }
  68. to {
  69. transform: scale3d(1, 1, 1);
  70. }
  71. }
  72. .animate__rubberBand {
  73. animation-name: rubberBand;
  74. }
  75. @keyframes bounceIn {
  76. from,
  77. 20%,
  78. 40%,
  79. 60%,
  80. 80%,
  81. to {
  82. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  83. }
  84. 0% {
  85. opacity: 0;
  86. transform: scale3d(0.3, 0.3, 0.3);
  87. }
  88. 20% {
  89. transform: scale3d(1.1, 1.1, 1.1);
  90. }
  91. 40% {
  92. transform: scale3d(0.9, 0.9, 0.9);
  93. }
  94. 60% {
  95. opacity: 1;
  96. transform: scale3d(1.03, 1.03, 1.03);
  97. }
  98. 80% {
  99. transform: scale3d(0.97, 0.97, 0.97);
  100. }
  101. to {
  102. opacity: 1;
  103. transform: scale3d(1, 1, 1);
  104. }
  105. }
  106. .animate__bounceIn {
  107. animation-name: bounceIn;
  108. }
  109. @keyframes fadeIn {
  110. from {
  111. opacity: 0;
  112. }
  113. to {
  114. opacity: 1;
  115. }
  116. }
  117. .animate__fadeIn {
  118. animation-name: fadeIn;
  119. }