API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 25th, 2019
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.17 KB | None | 0 0
raw download clone embed print report
  1. #app {
  2. position: relative;
  3. height: 300px;
  4. top: 20px;
  5. }
  6.  
  7. .down {
  8. -webkit-animation: down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  9. animation: down 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  10. }
  11.  
  12. @-webkit-keyframes down {
  13. 0% {
  14. -webkit-transform: translateY(0);
  15. transform: translateY(0);
  16. }
  17. 100% {
  18. -webkit-transform: translateY(100px);
  19. transform: translateY(100px);
  20. }
  21. }
  22. @keyframes down {
  23. 0% {
  24. -webkit-transform: translateY(0);
  25. transform: translateY(0);
  26. }
  27. 100% {
  28. -webkit-transform: translateY(100px);
  29. transform: translateY(100px);
  30. }
  31. }
  32.  
  33. .up {
  34. -webkit-animation: up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  35. animation: up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  36. }
  37.  
  38. @-webkit-keyframes up {
  39. 0% {
  40. -webkit-transform: translateY(0);
  41. transform: translateY(0);
  42. }
  43. 100% {
  44. -webkit-transform: translateY(-100px);
  45. transform: translateY(-100px);
  46. }
  47. }
  48. @keyframes up {
  49. 0% {
  50. -webkit-transform: translateY(0);
  51. transform: translateY(0);
  52. }
  53. 100% {
  54. -webkit-transform: translateY(-100px);
  55. transform: translateY(-100px);
  56. }
  57. }
  58.  
  59. .right {
  60. -webkit-animation: right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  61. animation: right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  62. }
  63.  
  64. @-webkit-keyframes right {
  65. 0% {
  66. -webkit-transform: translateX(0);
  67. transform: translateX(0);
  68. }
  69. 100% {
  70. -webkit-transform: translateX(100px);
  71. transform: translateX(100px);
  72. }
  73. }
  74. @keyframes right {
  75. 0% {
  76. -webkit-transform: translateX(0);
  77. transform: translateX(0);
  78. }
  79. 100% {
  80. -webkit-transform: translateX(100px);
  81. transform: translateX(100px);
  82. }
  83. }
  84.  
  85. .left {
  86. -webkit-animation: left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  87. animation: left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  88. }
  89.  
  90. @-webkit-keyframes left {
  91. 0% {
  92. -webkit-transform: translateX(0);
  93. transform: translateX(0);
  94. }
  95. 100% {
  96. -webkit-transform: translateX(-100px);
  97. transform: translateX(-100px);
  98. }
  99. }
  100. @keyframes left {
  101. 0% {
  102. -webkit-transform: translateX(0);
  103. transform: translateX(0);
  104. }
  105. 100% {
  106. -webkit-transform: translateX(-100px);
  107. transform: translateX(-100px);
  108. }
  109. }
  110.  
  111. .rotate-scale-up {
  112. -webkit-animation: rotate-scale-up 0.65s ease-in-out both;
  113. animation: rotate-scale-up 0.65s ease-in-out both;
  114. }
  115.  
  116. @-webkit-keyframes rotate-scale-up {
  117. 0% {
  118. -webkit-transform: scale(1) rotateZ(0);
  119. transform: scale(1) rotateZ(0);
  120. }
  121. 50% {
  122. -webkit-transform: scale(2) rotateZ(1440deg);
  123. transform: scale(2) rotateZ(1440deg);
  124. }
  125. 100% {
  126. -webkit-transform: scale(1) rotateZ(2880deg);
  127. transform: scale(1) rotateZ(2880deg);
  128. }
  129. }
  130. @keyframes rotate-scale-up {
  131. 0% {
  132. -webkit-transform: scale(1) rotateZ(0);
  133. transform: scale(1) rotateZ(0);
  134. }
  135. 50% {
  136. -webkit-transform: scale(2) rotateZ(1440deg);
  137. transform: scale(2) rotateZ(1440deg);
  138. }
  139. 100% {
  140. -webkit-transform: scale(1) rotateZ(2880deg);
  141. transform: scale(1) rotateZ(2880deg);
  142. }
  143. }
  144.  
  145. .blur {
  146.  
  147. -webkit-filter: blur(4px);
  148.  
  149. filter: blur(4px);
  150.  
  151. }
  152.  
  153. .blur {
  154.  
  155. -webkit-transition: all 0.4s ease;
  156.  
  157. transition: all 0.4s ease;
  158.  
  159. }
  160.  
  161. .button-blur {
  162.  
  163. -webkit-filter: blur(40px);
  164.  
  165. filter: blur(40px);
  166.  
  167. }
  168.  
  169. .button-blur {
  170.  
  171. -webkit-transition: all 0.4s ease;
  172.  
  173. transition: all 0.4s ease;
  174.  
  175. }
  176.  
  177. .fadeOut {
  178. -webkit-animation-duration: 0.5s;animation-duration: 0.5s;
  179. -webkit-animation-fill-mode: both;animation-fill-mode: both;
  180. }
  181.  
  182. @-webkit-keyframes fadeOut {
  183. 0% {opacity: 1;}
  184. 100% {opacity: 0;}
  185. }
  186.  
  187. @keyframes fadeOut {
  188. 0% {opacity: 1;}
  189. 100% {opacity: 0;}
  190. }
  191.  
  192. .fadeOut {
  193. -webkit-animation-name: fadeOut;
  194. animation-name: fadeOut;
  195. }
  196.  
  197.  
  198. .fadeIn {
  199. -webkit-animation-duration: 0.5s;
  200. animation-duration: 0.5s;
  201. -webkit-animation-fill-mode: both;
  202. animation-fill-mode: both;
  203. }
  204.  
  205. @-webkit-keyframes fadeIn {
  206. 0% {opacity: 0;}
  207. 100% {opacity: 1;}
  208. }
  209.  
  210. @keyframes fadeIn {
  211. 0% {opacity: 0;}
  212. 100% {opacity: 1;}
  213. }
  214.  
  215. .fadeIn {
  216. -webkit-animation-name: fadeIn;
  217. animation-name: fadeIn;
  218. }
  219.  
  220. .slit-out-vertical {
  221. -webkit-animation: slit-out-vertical 0.5s ease-in both;
  222. animation: slit-out-vertical 0.5s ease-in both;
  223. }
  224.  
  225. @-webkit-keyframes slit-out-vertical {
  226. 0% {
  227. -webkit-transform: translateZ(0) rotateY(0);
  228. transform: translateZ(0) rotateY(0);
  229. opacity: 1;
  230. }
  231. 54% {
  232. -webkit-transform: translateZ(-160px) rotateY(87deg);
  233. transform: translateZ(-160px) rotateY(87deg);
  234. opacity: 1;
  235. }
  236. 100% {
  237. -webkit-transform: translateZ(-800px) rotateY(90deg);
  238. transform: translateZ(-800px) rotateY(90deg);
  239. opacity: 0;
  240. }
  241. }
  242. @keyframes slit-out-vertical {
  243. 0% {
  244. -webkit-transform: translateZ(0) rotateY(0);
  245. transform: translateZ(0) rotateY(0);
  246. opacity: 1;
  247. }
  248. 54% {
  249. -webkit-transform: translateZ(-160px) rotateY(87deg);
  250. transform: translateZ(-160px) rotateY(87deg);
  251. opacity: 1;
  252. }
  253. 100% {
  254. -webkit-transform: translateZ(-800px) rotateY(90deg);
  255. transform: translateZ(-800px) rotateY(90deg);
  256. opacity: 0;
  257. }
  258. }
  259.  
  260. .slit-in-vertical {
  261. -webkit-animation: slit-in-vertical 0.45s ease-out both;
  262. animation: slit-in-vertical 0.45s ease-out both;
  263. }
  264.  
  265. @-webkit-keyframes slit-in-vertical {
  266. 0% {
  267. -webkit-transform: translateZ(-800px) rotateY(90deg);
  268. transform: translateZ(-800px) rotateY(90deg);
  269. opacity: 0;
  270. }
  271. 54% {
  272. -webkit-transform: translateZ(-160px) rotateY(87deg);
  273. transform: translateZ(-160px) rotateY(87deg);
  274. opacity: 1;
  275. }
  276. 100% {
  277. -webkit-transform: translateZ(0) rotateY(0);
  278. transform: translateZ(0) rotateY(0);
  279. }
  280. }
  281. @keyframes slit-in-vertical {
  282. 0% {
  283. -webkit-transform: translateZ(-800px) rotateY(90deg);
  284. transform: translateZ(-800px) rotateY(90deg);
  285. opacity: 0;
  286. }
  287. 54% {
  288. -webkit-transform: translateZ(-160px) rotateY(87deg);
  289. transform: translateZ(-160px) rotateY(87deg);
  290. opacity: 1;
  291. }
  292. 100% {
  293. -webkit-transform: translateZ(0) rotateY(0);
  294. transform: translateZ(0) rotateY(0);
  295. }
  296. }
  297.  
  298. @-webkit-keyframes slit-in-vertical {
  299. 0% {
  300. -webkit-transform: translateZ(-800px) rotateY(90deg);
  301. transform: translateZ(-800px) rotateY(90deg);
  302. opacity: 0;
  303. }
  304. 54% {
  305. -webkit-transform: translateZ(-160px) rotateY(87deg);
  306. transform: translateZ(-160px) rotateY(87deg);
  307. opacity: 1;
  308. }
  309. 100% {
  310. -webkit-transform: translateZ(0) rotateY(0);
  311. transform: translateZ(0) rotateY(0);
  312. }
  313. }
  314. @keyframes slit-in-vertical {
  315. 0% {
  316. -webkit-transform: translateZ(-800px) rotateY(90deg);
  317. transform: translateZ(-800px) rotateY(90deg);
  318. opacity: 0;
  319. }
  320. 54% {
  321. -webkit-transform: translateZ(-160px) rotateY(87deg);
  322. transform: translateZ(-160px) rotateY(87deg);
  323. opacity: 1;
  324. }
  325. 100% {
  326. -webkit-transform: translateZ(0) rotateY(0);
  327. transform: translateZ(0) rotateY(0);
  328. }
  329. }
  330.  
  331. .row {
  332. height: 400px;
  333. width: 100%;
  334. position: absolute;
  335. display: flex;
  336. flex-direction: row;
  337. }
  338.  
  339. .control-panel {
  340. display: flex;
  341. flex-direction: column;
  342. width: 450px;
  343. }
  344.  
  345. .button {
  346. margin: 15px;
  347. width: 30%;
  348. }
  349.  
  350. @media (max-width: 1000px) {
  351. body{
  352. width: 450px;
  353. }
  354. #app {
  355. width: 100%;
  356. }
  357. .row {
  358. flex-direction: column;
  359. height: 400px;
  360. width: 450px;
  361. }
  362. .control-panel {
  363. flex-direction: row;
  364. display: flex;
  365. }
  366. .button {
  367. margin: 20px;
  368. }
  369.  
  370. }
  371.  
  372. .message-field-display-none {
  373. display: none !important;
  374. }
  375.  
  376. p {
  377. margin-top: 0;
  378. margin-bottom: 0 !important;
  379. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!