animations.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. :root {
  2. --animate-pulse: pulse-opacity 2s ease-in-out infinite;
  3. --animate-pulse-scale: pulse-scale 1.2s ease-in-out infinite;
  4. }
  5. @keyframes pulse-opacity {
  6. 0%,
  7. 100% {
  8. opacity: 0.4;
  9. }
  10. 50% {
  11. opacity: 1;
  12. }
  13. }
  14. @keyframes pulse-scale {
  15. 0%,
  16. 100% {
  17. transform: scale(1);
  18. }
  19. 50% {
  20. transform: scale(0.6666667);
  21. }
  22. }
  23. @keyframes pulse-opacity-dim {
  24. 0%,
  25. 100% {
  26. opacity: 0.15;
  27. }
  28. 50% {
  29. opacity: 0.35;
  30. }
  31. }
  32. @keyframes fadeUp {
  33. from {
  34. opacity: 0;
  35. transform: translateY(5px);
  36. }
  37. to {
  38. opacity: 1;
  39. transform: translateY(0);
  40. }
  41. }
  42. .fade-up-text {
  43. animation: fadeUp 0.4s ease-out forwards;
  44. opacity: 0;
  45. &:nth-child(1) {
  46. animation-delay: 0.1s;
  47. }
  48. &:nth-child(2) {
  49. animation-delay: 0.2s;
  50. }
  51. &:nth-child(3) {
  52. animation-delay: 0.3s;
  53. }
  54. &:nth-child(4) {
  55. animation-delay: 0.4s;
  56. }
  57. &:nth-child(5) {
  58. animation-delay: 0.5s;
  59. }
  60. &:nth-child(6) {
  61. animation-delay: 0.6s;
  62. }
  63. &:nth-child(7) {
  64. animation-delay: 0.7s;
  65. }
  66. &:nth-child(8) {
  67. animation-delay: 0.8s;
  68. }
  69. &:nth-child(9) {
  70. animation-delay: 0.9s;
  71. }
  72. &:nth-child(10) {
  73. animation-delay: 1s;
  74. }
  75. &:nth-child(11) {
  76. animation-delay: 1.1s;
  77. }
  78. &:nth-child(12) {
  79. animation-delay: 1.2s;
  80. }
  81. &:nth-child(13) {
  82. animation-delay: 1.3s;
  83. }
  84. &:nth-child(14) {
  85. animation-delay: 1.4s;
  86. }
  87. &:nth-child(15) {
  88. animation-delay: 1.5s;
  89. }
  90. &:nth-child(16) {
  91. animation-delay: 1.6s;
  92. }
  93. &:nth-child(17) {
  94. animation-delay: 1.7s;
  95. }
  96. &:nth-child(18) {
  97. animation-delay: 1.8s;
  98. }
  99. &:nth-child(19) {
  100. animation-delay: 1.9s;
  101. }
  102. &:nth-child(20) {
  103. animation-delay: 2s;
  104. }
  105. &:nth-child(21) {
  106. animation-delay: 2.1s;
  107. }
  108. &:nth-child(22) {
  109. animation-delay: 2.2s;
  110. }
  111. &:nth-child(23) {
  112. animation-delay: 2.3s;
  113. }
  114. &:nth-child(24) {
  115. animation-delay: 2.4s;
  116. }
  117. &:nth-child(25) {
  118. animation-delay: 2.5s;
  119. }
  120. &:nth-child(26) {
  121. animation-delay: 2.6s;
  122. }
  123. &:nth-child(27) {
  124. animation-delay: 2.7s;
  125. }
  126. &:nth-child(28) {
  127. animation-delay: 2.8s;
  128. }
  129. &:nth-child(29) {
  130. animation-delay: 2.9s;
  131. }
  132. &:nth-child(30) {
  133. animation-delay: 3s;
  134. }
  135. }