reactions.css 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754
  1. .emoji {
  2. font-size: 0.25px;
  3. width: 120em;
  4. height: 120em;
  5. margin: 15em 7em;
  6. background: #FFDA6A;
  7. display: -webkit-inline-box;
  8. display: -ms-inline-flexbox;
  9. display: inline-flex;
  10. border-radius: 50%;
  11. position: relative; }
  12. .emoji:hover {
  13. -webkit-transform: scale(1.2);
  14. transform: scale(1.2); }
  15. .emoji:after {
  16. position: absolute;
  17. bottom: -40em;
  18. font-size: 18em;
  19. width: 60em;
  20. left: calc(50% - 30em);
  21. color: #8A8A8A; }
  22. .emoji__face, .emoji__eyebrows, .emoji__eyes, .emoji__mouth, .emoji__tongue, .emoji__heart, .emoji__hand, .emoji__thumb {
  23. position: absolute; }
  24. .emoji__face:before, .emoji__face:after, .emoji__eyebrows:before, .emoji__eyebrows:after, .emoji__eyes:before, .emoji__eyes:after, .emoji__mouth:before, .emoji__mouth:after, .emoji__tongue:before, .emoji__tongue:after, .emoji__heart:before, .emoji__heart:after, .emoji__hand:before, .emoji__hand:after, .emoji__thumb:before, .emoji__thumb:after {
  25. position: absolute;
  26. content: ''; }
  27. .emoji__face {
  28. width: inherit;
  29. height: inherit; }
  30. .emoji--like {
  31. background: #548DFF; }
  32. .emoji--like .emoji__hand {
  33. left: 25em;
  34. bottom: 30em;
  35. width: 20em;
  36. height: 40em;
  37. background: #FFFFFF;
  38. border-radius: 5em;
  39. z-index: 0;
  40. -webkit-animation: hands-up 2s linear infinite;
  41. animation: hands-up 2s linear infinite; }
  42. .emoji--like .emoji__hand:before {
  43. left: 25em;
  44. bottom: 5em;
  45. width: 40em;
  46. background: inherit;
  47. height: 10em;
  48. border-radius: 2em 10em 10em 2em;
  49. -webkit-box-shadow: 1em -9em 0 1em #FFFFFF, 2em -19em 0 2em #FFFFFF, 3em -29em 0 3em #FFFFFF;
  50. box-shadow: 1em -9em 0 1em #FFFFFF, 2em -19em 0 2em #FFFFFF, 3em -29em 0 3em #FFFFFF; }
  51. .emoji--like .emoji__thumb {
  52. border-bottom: 20em solid #FFFFFF;
  53. border-left: 20em solid transparent;
  54. top: -25em;
  55. right: -25em;
  56. z-index: 2;
  57. -webkit-transform: rotate(5deg);
  58. transform: rotate(5deg);
  59. -webkit-transform-origin: 0% 100%;
  60. transform-origin: 0% 100%;
  61. -webkit-animation: thumbs-up 2s linear infinite;
  62. animation: thumbs-up 2s linear infinite; }
  63. .emoji--like .emoji__thumb:before {
  64. border-radius: 50% 50% 0 0;
  65. background: #FFFFFF;
  66. width: 10em;
  67. height: 12em;
  68. left: -10em;
  69. top: -8em;
  70. -webkit-transform: rotate(-15deg);
  71. transform: rotate(-15deg);
  72. -webkit-transform-origin: 100% 100%;
  73. transform-origin: 100% 100%;
  74. -webkit-box-shadow: -1em 4em 0 -1em #FFFFFF;
  75. box-shadow: -1em 4em 0 -1em #FFFFFF; }
  76. .emoji--love {
  77. background: #F55064; }
  78. .emoji--love .emoji__heart {
  79. left: calc(50% - 40em);
  80. top: calc(50% - 40em);
  81. width: 80em;
  82. height: 80em;
  83. -webkit-animation: heart-beat 1s linear infinite alternate;
  84. animation: heart-beat 1s linear infinite alternate; }
  85. .emoji--love .emoji__heart:before, .emoji--love .emoji__heart:after {
  86. left: calc(50% - 20em);
  87. top: calc(50% - 32em);
  88. width: 40em;
  89. height: 64em;
  90. background: #FFFFFF;
  91. border-radius: 20em 20em 0 0; }
  92. .emoji--love .emoji__heart:before {
  93. -webkit-transform: translate(20em) rotate(-45deg);
  94. transform: translate(20em) rotate(-45deg);
  95. -webkit-transform-origin: 0 100%;
  96. transform-origin: 0 100%; }
  97. .emoji--love .emoji__heart:after {
  98. -webkit-transform: translate(-20em) rotate(45deg);
  99. transform: translate(-20em) rotate(45deg);
  100. -webkit-transform-origin: 100% 100%;
  101. transform-origin: 100% 100%; }
  102. .emoji--haha .emoji__face {
  103. -webkit-animation: haha-face 2s linear infinite;
  104. animation: haha-face 2s linear infinite; }
  105. .emoji--haha .emoji__eyes {
  106. width: 26em;
  107. height: 6em;
  108. border-radius: 2em;
  109. left: calc(50% - 13em);
  110. top: 35em;
  111. -webkit-transform: rotate(20deg);
  112. transform: rotate(20deg);
  113. background: transparent;
  114. -webkit-box-shadow: -25em 5em 0 0 #000000, 25em -5em 0 0 #000000;
  115. box-shadow: -25em 5em 0 0 #000000, 25em -5em 0 0 #000000; }
  116. .emoji--haha .emoji__eyes:after {
  117. left: 0;
  118. top: 0;
  119. width: 26em;
  120. height: 6em;
  121. border-radius: 2em;
  122. -webkit-transform: rotate(-40deg);
  123. transform: rotate(-40deg);
  124. background: transparent;
  125. -webkit-box-shadow: -25em -5em 0 0 #000000, 25em 5em 0 0 #000000;
  126. box-shadow: -25em -5em 0 0 #000000, 25em 5em 0 0 #000000; }
  127. .emoji--haha .emoji__mouth {
  128. width: 80em;
  129. height: 40em;
  130. left: calc(50% - 40em);
  131. top: 50%;
  132. background: #000000;
  133. border-radius: 0 0 40em 40em;
  134. overflow: hidden;
  135. z-index: 1;
  136. -webkit-animation: haha-mouth 2s linear infinite;
  137. animation: haha-mouth 2s linear infinite; }
  138. .emoji--haha .emoji__tongue {
  139. width: 70em;
  140. height: 30em;
  141. background: #F55064;
  142. left: calc(50% - 35em);
  143. bottom: -10em;
  144. border-radius: 50%; }
  145. .emoji--yay:after {
  146. -webkit-animation: yay-reverse 1s linear infinite;
  147. animation: yay-reverse 1s linear infinite; }
  148. .emoji--yay .emoji__face {
  149. -webkit-animation: yay 1s linear infinite alternate;
  150. animation: yay 1s linear infinite alternate; }
  151. .emoji--yay .emoji__eyebrows {
  152. left: calc(50% - 3em);
  153. top: 30em;
  154. height: 6em;
  155. width: 6em;
  156. border-radius: 50%;
  157. background: transparent;
  158. -webkit-box-shadow: -6em 0 0 0 #000000, -36em 0 0 0em #000000, 6em 0 0 0 #000000, 36em 0 0 0em #000000;
  159. box-shadow: -6em 0 0 0 #000000, -36em 0 0 0em #000000, 6em 0 0 0 #000000, 36em 0 0 0em #000000; }
  160. .emoji--yay .emoji__eyebrows:before, .emoji--yay .emoji__eyebrows:after {
  161. width: 36em;
  162. height: 18em;
  163. border-radius: 60em 60em 0 0;
  164. background: transparent;
  165. border: 6em solid black;
  166. -webkit-box-sizing: border-box;
  167. box-sizing: border-box;
  168. border-bottom: 0;
  169. bottom: 3em;
  170. left: calc(50% - 18em); }
  171. .emoji--yay .emoji__eyebrows:before {
  172. margin-left: -21em; }
  173. .emoji--yay .emoji__eyebrows:after {
  174. margin-left: 21em; }
  175. .emoji--yay .emoji__mouth {
  176. top: 60em;
  177. background: transparent;
  178. left: 50%; }
  179. .emoji--yay .emoji__mouth:after {
  180. width: 80em;
  181. height: 80em;
  182. left: calc(50% - 40em);
  183. top: -75em;
  184. border-radius: 50%;
  185. background: transparent;
  186. border: 6em solid #000000;
  187. -webkit-box-sizing: border-box;
  188. box-sizing: border-box;
  189. border-top-color: transparent;
  190. border-left-color: transparent;
  191. border-right-color: transparent;
  192. z-index: 1; }
  193. .emoji--yay .emoji__mouth:before {
  194. width: 6em;
  195. height: 6em;
  196. background: transparent;
  197. border-radius: 50%;
  198. bottom: 5em;
  199. left: calc(50% - 3em);
  200. -webkit-box-shadow: -25em 0 0 0 #000000, 25em 0 0 0 #000000, -35em -2em 30em 10em #D5234C, 35em -2em 30em 10em #D5234C;
  201. box-shadow: -25em 0 0 0 #000000, 25em 0 0 0 #000000, -35em -2em 30em 10em #D5234C, 35em -2em 30em 10em #D5234C; }
  202. .emoji--wow .emoji__face {
  203. -webkit-animation: wow-face 3s linear infinite;
  204. animation: wow-face 3s linear infinite; }
  205. .emoji--wow .emoji__eyebrows {
  206. left: calc(50% - 3em);
  207. height: 6em;
  208. width: 6em;
  209. border-radius: 50%;
  210. background: transparent;
  211. -webkit-box-shadow: -18em 0 0 0 #000000, -33em 0 0 0 #000000, 18em 0 0 0 #000000, 33em 0 0 0 #000000;
  212. box-shadow: -18em 0 0 0 #000000, -33em 0 0 0 #000000, 18em 0 0 0 #000000, 33em 0 0 0 #000000;
  213. -webkit-animation: wow-brow 3s linear infinite;
  214. animation: wow-brow 3s linear infinite; }
  215. .emoji--wow .emoji__eyebrows:before, .emoji--wow .emoji__eyebrows:after {
  216. width: 24em;
  217. height: 20em;
  218. border: 6em solid #000000;
  219. -webkit-box-sizing: border-box;
  220. box-sizing: border-box;
  221. border-radius: 50%;
  222. border-bottom-color: transparent;
  223. border-left-color: transparent;
  224. border-right-color: transparent;
  225. top: -3em;
  226. left: calc(50% - 12em); }
  227. .emoji--wow .emoji__eyebrows:before {
  228. margin-left: -25em; }
  229. .emoji--wow .emoji__eyebrows:after {
  230. margin-left: 25em; }
  231. .emoji--wow .emoji__eyes {
  232. width: 16em;
  233. height: 24em;
  234. left: calc(50% - 8em);
  235. top: 35em;
  236. border-radius: 50%;
  237. background: transparent;
  238. -webkit-box-shadow: 25em 0 0 0 #000000, -25em 0 0 0 #000000;
  239. box-shadow: 25em 0 0 0 #000000, -25em 0 0 0 #000000; }
  240. .emoji--wow .emoji__mouth {
  241. width: 30em;
  242. height: 45em;
  243. left: calc(50% - 15em);
  244. top: 50%;
  245. border-radius: 50%;
  246. background: #000000;
  247. -webkit-animation: wow-mouth 3s linear infinite;
  248. animation: wow-mouth 3s linear infinite; }
  249. .emoji--sad .emoji__face {
  250. -webkit-animation: sad-face 2s ease-in infinite;
  251. animation: sad-face 2s ease-in infinite; }
  252. .emoji--sad .emoji__eyebrows {
  253. left: calc(50% - 3em);
  254. top: 35em;
  255. height: 6em;
  256. width: 6em;
  257. border-radius: 50%;
  258. background: transparent;
  259. -webkit-box-shadow: -40em 9em 0 0 #000000, -25em 0 0 0 #000000, 25em 0 0 0 #000000, 40em 9em 0 0 #000000;
  260. box-shadow: -40em 9em 0 0 #000000, -25em 0 0 0 #000000, 25em 0 0 0 #000000, 40em 9em 0 0 #000000; }
  261. .emoji--sad .emoji__eyebrows:before, .emoji--sad .emoji__eyebrows:after {
  262. width: 30em;
  263. height: 20em;
  264. border: 6em solid #000000;
  265. -webkit-box-sizing: border-box;
  266. box-sizing: border-box;
  267. border-radius: 50%;
  268. border-bottom-color: transparent;
  269. border-left-color: transparent;
  270. border-right-color: transparent;
  271. top: 2em;
  272. left: calc(50% - 15em); }
  273. .emoji--sad .emoji__eyebrows:before {
  274. margin-left: -30em;
  275. -webkit-transform: rotate(-30deg);
  276. transform: rotate(-30deg); }
  277. .emoji--sad .emoji__eyebrows:after {
  278. margin-left: 30em;
  279. -webkit-transform: rotate(30deg);
  280. transform: rotate(30deg); }
  281. .emoji--sad .emoji__eyes {
  282. width: 14em;
  283. height: 16em;
  284. left: calc(50% - 7em);
  285. top: 50em;
  286. border-radius: 50%;
  287. background: transparent;
  288. -webkit-box-shadow: 25em 0 0 0 #000000, -25em 0 0 0 #000000;
  289. box-shadow: 25em 0 0 0 #000000, -25em 0 0 0 #000000; }
  290. .emoji--sad .emoji__eyes:after {
  291. background: #548DFF;
  292. width: 12em;
  293. height: 12em;
  294. margin-left: 6em;
  295. border-radius: 0 100% 40% 50% / 0 50% 40% 100%;
  296. -webkit-transform-origin: 0% 0%;
  297. transform-origin: 0% 0%;
  298. -webkit-animation: tear-drop 2s ease-in infinite;
  299. animation: tear-drop 2s ease-in infinite; }
  300. .emoji--sad .emoji__mouth {
  301. width: 60em;
  302. height: 80em;
  303. left: calc(50% - 30em);
  304. top: 80em;
  305. -webkit-box-sizing: border-box;
  306. box-sizing: border-box;
  307. border: 6em solid #000000;
  308. border-radius: 50%;
  309. border-bottom-color: transparent;
  310. border-left-color: transparent;
  311. border-right-color: transparent;
  312. background: transparent;
  313. -webkit-animation: sad-mouth 2s ease-in infinite;
  314. animation: sad-mouth 2s ease-in infinite; }
  315. .emoji--sad .emoji__mouth:after {
  316. width: 6em;
  317. height: 6em;
  318. background: transparent;
  319. border-radius: 50%;
  320. top: 4em;
  321. left: calc(50% - 3em);
  322. -webkit-box-shadow: -18em 0 0 0 #000000, 18em 0 0 0 #000000;
  323. box-shadow: -18em 0 0 0 #000000, 18em 0 0 0 #000000; }
  324. .emoji--angry {
  325. background: -webkit-gradient(linear, left top, left bottom, color-stop(-10%, #D5234C), to(#FFDA6A));
  326. background: linear-gradient(#D5234C -10%, #FFDA6A);
  327. background-size: 100%;
  328. -webkit-animation: angry-color 2s ease-in infinite;
  329. animation: angry-color 2s ease-in infinite; }
  330. .emoji--angry .emoji__face {
  331. -webkit-animation: angry-face 2s ease-in infinite;
  332. animation: angry-face 2s ease-in infinite; }
  333. .emoji--angry .emoji__eyebrows {
  334. left: calc(50% - 3em);
  335. top: 55em;
  336. height: 6em;
  337. width: 6em;
  338. border-radius: 50%;
  339. background: transparent;
  340. -webkit-box-shadow: -44em 5em 0 0 #000000, -7em 16em 0 0 #000000, 7em 16em 0 0 #000000, 44em 5em 0 0 #000000;
  341. box-shadow: -44em 5em 0 0 #000000, -7em 16em 0 0 #000000, 7em 16em 0 0 #000000, 44em 5em 0 0 #000000; }
  342. .emoji--angry .emoji__eyebrows:before, .emoji--angry .emoji__eyebrows:after {
  343. width: 50em;
  344. height: 20em;
  345. border: 6em solid #000000;
  346. -webkit-box-sizing: border-box;
  347. box-sizing: border-box;
  348. border-radius: 50%;
  349. border-top-color: transparent;
  350. border-left-color: transparent;
  351. border-right-color: transparent;
  352. top: 0;
  353. left: calc(50% - 25em); }
  354. .emoji--angry .emoji__eyebrows:before {
  355. margin-left: -25em;
  356. -webkit-transform: rotate(15deg);
  357. transform: rotate(15deg); }
  358. .emoji--angry .emoji__eyebrows:after {
  359. margin-left: 25em;
  360. -webkit-transform: rotate(-15deg);
  361. transform: rotate(-15deg); }
  362. .emoji--angry .emoji__eyes {
  363. width: 12em;
  364. height: 12em;
  365. left: calc(50% - 6em);
  366. top: 70em;
  367. border-radius: 50%;
  368. background: transparent;
  369. -webkit-box-shadow: 25em 0 0 0 #000000, -25em 0 0 0 #000000;
  370. box-shadow: 25em 0 0 0 #000000, -25em 0 0 0 #000000; }
  371. .emoji--angry .emoji__mouth {
  372. width: 36em;
  373. height: 18em;
  374. left: calc(50% - 18em);
  375. bottom: 15em;
  376. background: #000000;
  377. border-radius: 50%;
  378. -webkit-animation: angry-mouth 2s ease-in infinite;
  379. animation: angry-mouth 2s ease-in infinite; }
  380. @-webkit-keyframes heart-beat {
  381. 25% {
  382. -webkit-transform: scale(1.1);
  383. transform: scale(1.1); }
  384. 75% {
  385. -webkit-transform: scale(0.6);
  386. transform: scale(0.6); } }
  387. @keyframes heart-beat {
  388. 25% {
  389. -webkit-transform: scale(1.1);
  390. transform: scale(1.1); }
  391. 75% {
  392. -webkit-transform: scale(0.6);
  393. transform: scale(0.6); } }
  394. @-webkit-keyframes haha-face {
  395. 10%, 30%, 50% {
  396. -webkit-transform: translateY(25em);
  397. transform: translateY(25em); }
  398. 20%, 40% {
  399. -webkit-transform: translateY(15em);
  400. transform: translateY(15em); }
  401. 60%, 80% {
  402. -webkit-transform: translateY(0);
  403. transform: translateY(0); }
  404. 70%, 90% {
  405. -webkit-transform: translateY(-10em);
  406. transform: translateY(-10em); } }
  407. @keyframes haha-face {
  408. 10%, 30%, 50% {
  409. -webkit-transform: translateY(25em);
  410. transform: translateY(25em); }
  411. 20%, 40% {
  412. -webkit-transform: translateY(15em);
  413. transform: translateY(15em); }
  414. 60%, 80% {
  415. -webkit-transform: translateY(0);
  416. transform: translateY(0); }
  417. 70%, 90% {
  418. -webkit-transform: translateY(-10em);
  419. transform: translateY(-10em); } }
  420. @-webkit-keyframes haha-mouth {
  421. 10%, 30%, 50% {
  422. -webkit-transform: scale(0.6);
  423. transform: scale(0.6);
  424. top: 45%; }
  425. 20%, 40% {
  426. -webkit-transform: scale(0.8);
  427. transform: scale(0.8);
  428. top: 45%; }
  429. 60%, 80% {
  430. -webkit-transform: scale(1);
  431. transform: scale(1);
  432. top: 50%; }
  433. 70% {
  434. -webkit-transform: scale(1.2);
  435. transform: scale(1.2);
  436. top: 50%; }
  437. 90% {
  438. -webkit-transform: scale(1.1);
  439. transform: scale(1.1);
  440. top: 50%; } }
  441. @keyframes haha-mouth {
  442. 10%, 30%, 50% {
  443. -webkit-transform: scale(0.6);
  444. transform: scale(0.6);
  445. top: 45%; }
  446. 20%, 40% {
  447. -webkit-transform: scale(0.8);
  448. transform: scale(0.8);
  449. top: 45%; }
  450. 60%, 80% {
  451. -webkit-transform: scale(1);
  452. transform: scale(1);
  453. top: 50%; }
  454. 70% {
  455. -webkit-transform: scale(1.2);
  456. transform: scale(1.2);
  457. top: 50%; }
  458. 90% {
  459. -webkit-transform: scale(1.1);
  460. transform: scale(1.1);
  461. top: 50%; } }
  462. @-webkit-keyframes yay {
  463. 25% {
  464. -webkit-transform: rotate(-15deg);
  465. transform: rotate(-15deg); }
  466. 75% {
  467. -webkit-transform: rotate(15deg);
  468. transform: rotate(15deg); } }
  469. @keyframes yay {
  470. 25% {
  471. -webkit-transform: rotate(-15deg);
  472. transform: rotate(-15deg); }
  473. 75% {
  474. -webkit-transform: rotate(15deg);
  475. transform: rotate(15deg); } }
  476. @-webkit-keyframes wow-face {
  477. 15%, 25% {
  478. -webkit-transform: rotate(20deg) translateX(-25em);
  479. transform: rotate(20deg) translateX(-25em); }
  480. 45%, 65% {
  481. -webkit-transform: rotate(-20deg) translateX(25em);
  482. transform: rotate(-20deg) translateX(25em); }
  483. 75%, 100% {
  484. -webkit-transform: rotate(0deg) translateX(0);
  485. transform: rotate(0deg) translateX(0); } }
  486. @keyframes wow-face {
  487. 15%, 25% {
  488. -webkit-transform: rotate(20deg) translateX(-25em);
  489. transform: rotate(20deg) translateX(-25em); }
  490. 45%, 65% {
  491. -webkit-transform: rotate(-20deg) translateX(25em);
  492. transform: rotate(-20deg) translateX(25em); }
  493. 75%, 100% {
  494. -webkit-transform: rotate(0deg) translateX(0);
  495. transform: rotate(0deg) translateX(0); } }
  496. @-webkit-keyframes wow-brow {
  497. 15%, 65% {
  498. top: 25em; }
  499. 75%, 100%, 0% {
  500. top: 15em; } }
  501. @keyframes wow-brow {
  502. 15%, 65% {
  503. top: 25em; }
  504. 75%, 100%, 0% {
  505. top: 15em; } }
  506. @-webkit-keyframes wow-mouth {
  507. 10%, 30% {
  508. width: 20em;
  509. height: 20em;
  510. left: calc(50% - 10em); }
  511. 50%, 70% {
  512. width: 30em;
  513. height: 40em;
  514. left: calc(50% - 15em); }
  515. 75%, 100% {
  516. height: 50em; } }
  517. @keyframes wow-mouth {
  518. 10%, 30% {
  519. width: 20em;
  520. height: 20em;
  521. left: calc(50% - 10em); }
  522. 50%, 70% {
  523. width: 30em;
  524. height: 40em;
  525. left: calc(50% - 15em); }
  526. 75%, 100% {
  527. height: 50em; } }
  528. @-webkit-keyframes sad-face {
  529. 25%, 35% {
  530. top: -15em; }
  531. 55%, 95% {
  532. top: 10em; }
  533. 100%, 0% {
  534. top: 0; } }
  535. @keyframes sad-face {
  536. 25%, 35% {
  537. top: -15em; }
  538. 55%, 95% {
  539. top: 10em; }
  540. 100%, 0% {
  541. top: 0; } }
  542. @-webkit-keyframes sad-mouth {
  543. 25%, 35% {
  544. -webkit-transform: scale(0.85);
  545. transform: scale(0.85);
  546. top: 70em; }
  547. 55%, 100%, 0% {
  548. -webkit-transform: scale(1);
  549. transform: scale(1);
  550. top: 80em; } }
  551. @keyframes sad-mouth {
  552. 25%, 35% {
  553. -webkit-transform: scale(0.85);
  554. transform: scale(0.85);
  555. top: 70em; }
  556. 55%, 100%, 0% {
  557. -webkit-transform: scale(1);
  558. transform: scale(1);
  559. top: 80em; } }
  560. @-webkit-keyframes tear-drop {
  561. 0%, 100% {
  562. display: block;
  563. left: 35em;
  564. top: 15em;
  565. -webkit-transform: rotate(45deg) scale(0);
  566. transform: rotate(45deg) scale(0); }
  567. 25% {
  568. display: block;
  569. left: 35em;
  570. -webkit-transform: rotate(45deg) scale(2);
  571. transform: rotate(45deg) scale(2); }
  572. 49.9% {
  573. display: block;
  574. left: 35em;
  575. top: 65em;
  576. -webkit-transform: rotate(45deg) scale(0);
  577. transform: rotate(45deg) scale(0); }
  578. 50% {
  579. display: block;
  580. left: -35em;
  581. top: 15em;
  582. -webkit-transform: rotate(45deg) scale(0);
  583. transform: rotate(45deg) scale(0); }
  584. 75% {
  585. display: block;
  586. left: -35em;
  587. -webkit-transform: rotate(45deg) scale(2);
  588. transform: rotate(45deg) scale(2); }
  589. 99.9% {
  590. display: block;
  591. left: -35em;
  592. top: 65em;
  593. -webkit-transform: rotate(45deg) scale(0);
  594. transform: rotate(45deg) scale(0); } }
  595. @keyframes tear-drop {
  596. 0%, 100% {
  597. display: block;
  598. left: 35em;
  599. top: 15em;
  600. -webkit-transform: rotate(45deg) scale(0);
  601. transform: rotate(45deg) scale(0); }
  602. 25% {
  603. display: block;
  604. left: 35em;
  605. -webkit-transform: rotate(45deg) scale(2);
  606. transform: rotate(45deg) scale(2); }
  607. 49.9% {
  608. display: block;
  609. left: 35em;
  610. top: 65em;
  611. -webkit-transform: rotate(45deg) scale(0);
  612. transform: rotate(45deg) scale(0); }
  613. 50% {
  614. display: block;
  615. left: -35em;
  616. top: 15em;
  617. -webkit-transform: rotate(45deg) scale(0);
  618. transform: rotate(45deg) scale(0); }
  619. 75% {
  620. display: block;
  621. left: -35em;
  622. -webkit-transform: rotate(45deg) scale(2);
  623. transform: rotate(45deg) scale(2); }
  624. 99.9% {
  625. display: block;
  626. left: -35em;
  627. top: 65em;
  628. -webkit-transform: rotate(45deg) scale(0);
  629. transform: rotate(45deg) scale(0); } }
  630. @-webkit-keyframes hands-up {
  631. 25% {
  632. -webkit-transform: rotate(15deg);
  633. transform: rotate(15deg); }
  634. 50% {
  635. -webkit-transform: rotate(-15deg) translateY(-10em);
  636. transform: rotate(-15deg) translateY(-10em); }
  637. 75%, 100% {
  638. -webkit-transform: rotate(0deg);
  639. transform: rotate(0deg); } }
  640. @keyframes hands-up {
  641. 25% {
  642. -webkit-transform: rotate(15deg);
  643. transform: rotate(15deg); }
  644. 50% {
  645. -webkit-transform: rotate(-15deg) translateY(-10em);
  646. transform: rotate(-15deg) translateY(-10em); }
  647. 75%, 100% {
  648. -webkit-transform: rotate(0deg);
  649. transform: rotate(0deg); } }
  650. @-webkit-keyframes thumbs-up {
  651. 25% {
  652. -webkit-transform: rotate(20deg);
  653. transform: rotate(20deg); }
  654. 50%, 100% {
  655. -webkit-transform: rotate(5deg);
  656. transform: rotate(5deg); } }
  657. @keyframes thumbs-up {
  658. 25% {
  659. -webkit-transform: rotate(20deg);
  660. transform: rotate(20deg); }
  661. 50%, 100% {
  662. -webkit-transform: rotate(5deg);
  663. transform: rotate(5deg); } }
  664. @-webkit-keyframes angry-color {
  665. 45%, 60% {
  666. background-size: 250%; }
  667. 85%, 100%, 0% {
  668. background-size: 100%; } }
  669. @keyframes angry-color {
  670. 45%, 60% {
  671. background-size: 250%; }
  672. 85%, 100%, 0% {
  673. background-size: 100%; } }
  674. @-webkit-keyframes angry-face {
  675. 35%, 60% {
  676. -webkit-transform: translateX(0) translateY(10em) scale(0.9);
  677. transform: translateX(0) translateY(10em) scale(0.9); }
  678. 40%, 50% {
  679. -webkit-transform: translateX(-5em) translateY(10em) scale(0.9);
  680. transform: translateX(-5em) translateY(10em) scale(0.9); }
  681. 45%, 55% {
  682. -webkit-transform: translateX(5em) translateY(10em) scale(0.9);
  683. transform: translateX(5em) translateY(10em) scale(0.9); } }
  684. @keyframes angry-face {
  685. 35%, 60% {
  686. -webkit-transform: translateX(0) translateY(10em) scale(0.9);
  687. transform: translateX(0) translateY(10em) scale(0.9); }
  688. 40%, 50% {
  689. -webkit-transform: translateX(-5em) translateY(10em) scale(0.9);
  690. transform: translateX(-5em) translateY(10em) scale(0.9); }
  691. 45%, 55% {
  692. -webkit-transform: translateX(5em) translateY(10em) scale(0.9);
  693. transform: translateX(5em) translateY(10em) scale(0.9); } }
  694. @-webkit-keyframes angry-mouth {
  695. 25%, 50% {
  696. height: 6em;
  697. bottom: 25em; } }
  698. @keyframes angry-mouth {
  699. 25%, 50% {
  700. height: 6em;
  701. bottom: 25em; } }
  702. /*# sourceMappingURL=reactions.css.map */