Advertisement
Guest User

Untitled

a guest
May 22nd, 2018
65
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.68 KB | None | 0 0
  1. .image, .image.background-to-fill {
  2. transform:scale(0.6) translateY(0%) !important;
  3. -webkit-transform:scale(0.6) translateY(0%) !important;
  4. }
  5. .opening .alert-message {
  6. animation: alertSlideLeft 1.5s forwards;
  7. -webkit-animation: alertSlideLeft 1.5s forwards;
  8. }
  9. .opening .donator-message {
  10. animation: alertSlideRight 1.5s forwards;
  11. -webkit-animation: alertSlideRight 1.5s forwards;
  12. }
  13. .text-container {
  14. transform:skew(0,-5deg);
  15. -webkit-transform: skew(0,-5deg);
  16. }
  17. .message-container {
  18. background-color:rgba;
  19. box-shadow:0 0 0px rgba;
  20. }
  21. .message {
  22. padding:5px 0 10px 0;
  23. }
  24. .opening .message-container {
  25. animation: flipInX 0s;
  26. -webkit-animation: flipInX 0s;
  27. }
  28.  
  29. .message > span {
  30. display:inline-block;
  31. animation: smoothTextSlide 8s forwards;
  32. -webkit-animation: smoothTextSlide 8s forwards;
  33. }
  34.  
  35. .donator-message > span {
  36. display:inline-block;
  37. animation: smoothTextSlideBack 8s forwards;
  38. -webkit-animation: smoothTextSlideBack 8s forwards;
  39. }
  40. .closing .message-container {
  41. animation: flipOutX 0s;
  42. -webkit-animation: flipOutX 0s;
  43. }
  44. .closing .message {
  45. animation: slideOutRight 1s forwards;
  46. }
  47. .closing .donator-message {
  48. animation: slideOutLeft 1s forwards;
  49. }
  50. @keyframes smoothTextSlide {
  51. 0% {
  52. transform: translateX(-10%);
  53. }
  54. 100% {
  55. transform: translateX(5%);
  56. }
  57. }
  58. @-webkit-keyframes smoothTextSlide {
  59. 0% {
  60. -webkit-transform: translateX(-10%);
  61. }
  62. 100% {
  63. -webkit-transform: translateX(5%);
  64. }
  65. }
  66. @keyframes smoothTextSlideBack {
  67. 0% {
  68. transform: translateX(10%);
  69. }
  70. 100% {
  71. transform: translateX(-5%);
  72. }
  73. }
  74. @-webkit-keyframes smoothTextSlideBack {
  75. 0% {
  76. -webkit-transform: translateX(10%);
  77. }
  78. 100% {
  79. -webkit-transform: translateX(-5%);
  80. }
  81. }
  82. @keyframes alertSlideLeft {
  83. 0% {
  84. transform: translateX(-10%);
  85. }
  86. 100% {
  87. transform: translateX(0);
  88. }
  89. }
  90. @-webkit-keyframes alertSlideLeft {
  91. 0% {
  92. -webkit-transform: translateX(-10%);
  93. }
  94. 100% {
  95. -webkit-transform: translateX(0);
  96. }
  97. }
  98. @keyframes alertSlideRight {
  99. 0% {
  100. transform: translateX(10%);
  101. }
  102. 100% {
  103. transform: translateX(0);
  104. }
  105. }
  106. @-webkit-keyframes alertSlideRight {
  107. 0% {
  108. -webkit-transform: translateX(10%);
  109. }
  110. 100% {
  111. -webkit-transform: translateX(0);
  112. }
  113. }
  114.  
  115. @-webkit-keyframes flipInXScale {
  116. 0% {
  117. -webkit-transform: perspective(400px) rotateX(90deg) scale(0) translateY(50%);
  118. opacity: 0;
  119. }
  120.  
  121. 40% {
  122. -webkit-transform: perspective(400px) rotateX(-10deg) scale(0) translateY(50%);
  123. }
  124.  
  125. 70% {
  126. -webkit-transform: perspective(400px) rotateX(10deg) scale(0) translateY(50%);
  127. }
  128.  
  129. 100% {
  130. -webkit-transform: perspective(400px) rotateX(0deg) scale(0) translateY(50%);
  131. opacity: 1;
  132. }
  133. }
  134. @keyframes flipInXScale {
  135. 0% {
  136. transform: perspective(400px) rotateX(90deg) scale(0) translateY(50%);
  137. opacity: 0;
  138. }
  139.  
  140. 40% {
  141. transform: perspective(400px) rotateX(-10deg) scale(0) translateY(50%);
  142. }
  143.  
  144. 70% {
  145. transform: perspective(400px) rotateX(10deg) scale(0) translateY(50%);
  146. }
  147.  
  148. 100% {
  149. transform: perspective(400px) rotateX(0deg) scale(0) translateY(50%);
  150. opacity: 1;
  151. }
  152. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement