animations.tsx 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import {keyframes} from '@emotion/react';
  2. import {Theme} from 'sentry/utils/theme';
  3. export const growIn = keyframes`
  4. 0% {
  5. opacity: 0;
  6. transform: scale(0.75);
  7. }
  8. 100% {
  9. opacity: 1;
  10. transform: scale(1);
  11. }
  12. `;
  13. export const growDown = (height: string) => keyframes`
  14. 0% {
  15. height: 0;
  16. }
  17. 100% {
  18. height: ${height};
  19. }
  20. `;
  21. export const fadeIn = keyframes`
  22. 0% {
  23. opacity: 0;
  24. }
  25. 100% {
  26. opacity: 1;
  27. }
  28. `;
  29. export const fadeOut = keyframes`
  30. 0% {
  31. opacity: 1;
  32. }
  33. 100% {
  34. opacity: 0;
  35. }
  36. `;
  37. export const pulse = (size: number) => keyframes`
  38. 0% {
  39. transform: scale(1,1);
  40. }
  41. 50% {
  42. transform: scale(${size}, ${size});
  43. }
  44. 100% {
  45. transform: scale(1, 1);
  46. }
  47. `;
  48. export const expandOut = keyframes`
  49. 0% {
  50. transform: scale(1, 1);
  51. opacity: 1;
  52. }
  53. 100% {
  54. transform: scale(5, 5);
  55. opacity: 0;
  56. }
  57. `;
  58. export const slideInRight = keyframes`
  59. 0% {
  60. transform: translateX(20px);
  61. opacity: 0;
  62. }
  63. 100% {
  64. transform: translateX(0);
  65. opacity: 1;
  66. }
  67. `;
  68. export const slideInLeft = keyframes`
  69. 0% {
  70. transform: translateX(-20px);
  71. opacity: 0;
  72. }
  73. 100% {
  74. transform: translateX(0);
  75. opacity: 1;
  76. }
  77. `;
  78. export const slideInUp = keyframes`
  79. 0% {
  80. transform: translateY(10px);
  81. opacity: 0;
  82. }
  83. 100% {
  84. transform: translateY(0);
  85. opacity: 1;
  86. }
  87. `;
  88. export const highlight = (color: string) => keyframes`
  89. 0%,
  90. 100% {
  91. background: rgba(255, 255, 255, 0);
  92. }
  93. 25% {
  94. background: ${color};
  95. }
  96. `;
  97. // TODO(ts): priority should be pulled from `keyof typeof theme.alert`
  98. export const alertHighlight = (priority: string, theme: Theme) => keyframes`
  99. 0%,
  100. 100% {
  101. background: rgba(255, 255, 255, 0);
  102. border-color: transparent;
  103. }
  104. 25% {
  105. background: ${theme.alert[priority].backgroundLight};
  106. border-color: ${theme.alert[priority].border};
  107. }
  108. `;