Advertisement
Guest User

Untitled

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