animation.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. /*
  2. Animation 微动画
  3. 基于ColorUI组建库的动画模块 by 文晓港 2019年3月26日19:52:28
  4. */
  5. /* css 滤镜 控制黑白底色gif的 */
  6. .gif-black{
  7. mix-blend-mode: screen;
  8. }
  9. .gif-white{
  10. mix-blend-mode: multiply;
  11. }
  12. /* Animation css */
  13. [class*=animation-] {
  14. animation-duration: .5s;
  15. animation-timing-function: ease-out;
  16. animation-fill-mode: both
  17. }
  18. .animation-fade {
  19. animation-name: fade;
  20. animation-duration: .8s;
  21. animation-timing-function: linear
  22. }
  23. .animation-scale-up {
  24. animation-name: scale-up
  25. }
  26. .animation-scale-down {
  27. animation-name: scale-down
  28. }
  29. .animation-slide-top {
  30. animation-name: slide-top
  31. }
  32. .animation-slide-bottom {
  33. animation-name: slide-bottom
  34. }
  35. .animation-slide-left {
  36. animation-name: slide-left
  37. }
  38. .animation-slide-right {
  39. animation-name: slide-right
  40. }
  41. .animation-shake {
  42. animation-name: shake
  43. }
  44. .animation-reverse {
  45. animation-direction: reverse
  46. }
  47. @keyframes fade {
  48. 0% {
  49. opacity: 0
  50. }
  51. 100% {
  52. opacity: 1
  53. }
  54. }
  55. @keyframes scale-up {
  56. 0% {
  57. opacity: 0;
  58. transform: scale(.2)
  59. }
  60. 100% {
  61. opacity: 1;
  62. transform: scale(1)
  63. }
  64. }
  65. @keyframes scale-down {
  66. 0% {
  67. opacity: 0;
  68. transform: scale(1.8)
  69. }
  70. 100% {
  71. opacity: 1;
  72. transform: scale(1)
  73. }
  74. }
  75. @keyframes slide-top {
  76. 0% {
  77. opacity: 0;
  78. transform: translateY(-100%)
  79. }
  80. 100% {
  81. opacity: 1;
  82. transform: translateY(0)
  83. }
  84. }
  85. @keyframes slide-bottom {
  86. 0% {
  87. opacity: 0;
  88. transform: translateY(100%)
  89. }
  90. 100% {
  91. opacity: 1;
  92. transform: translateY(0)
  93. }
  94. }
  95. @keyframes shake {
  96. 0%,
  97. 100% {
  98. transform: translateX(0)
  99. }
  100. 10% {
  101. transform: translateX(-9px)
  102. }
  103. 20% {
  104. transform: translateX(8px)
  105. }
  106. 30% {
  107. transform: translateX(-7px)
  108. }
  109. 40% {
  110. transform: translateX(6px)
  111. }
  112. 50% {
  113. transform: translateX(-5px)
  114. }
  115. 60% {
  116. transform: translateX(4px)
  117. }
  118. 70% {
  119. transform: translateX(-3px)
  120. }
  121. 80% {
  122. transform: translateX(2px)
  123. }
  124. 90% {
  125. transform: translateX(-1px)
  126. }
  127. }
  128. @keyframes slide-left {
  129. 0% {
  130. opacity: 0;
  131. transform: translateX(-100%)
  132. }
  133. 100% {
  134. opacity: 1;
  135. transform: translateX(0)
  136. }
  137. }
  138. @keyframes slide-right {
  139. 0% {
  140. opacity: 0;
  141. transform: translateX(100%)
  142. }
  143. 100% {
  144. opacity: 1;
  145. transform: translateX(0)
  146. }
  147. }