button { background: none; border: none; } #random-emoji { --transition: 150ms; cursor: pointer; font-size: 11x; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; filter: grayscale(0.5); -webkit-animation: bounce-out 1s linear both; animation: bounce-out 1s linear both; } #random-emoji:hover { filter: grayscale(0); -webkit-animation-name: bounce-in; animation-name: bounce-in; } html { box-sizing: border-box; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } *:focus { outline: none; } body { background-color: var(--background-color); min-height: 100vh; display: flex; justify-content: left; align-items: left; } :root { --background-color: #ffffff; } @-webkit-keyframes bounce-in { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.38% { transform: matrix3d(1.157, 0, 0, 0, 0, 1.203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { transform: matrix3d(1.225, 0, 0, 0, 0, 1.302, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.76% { transform: matrix3d(1.327, 0, 0, 0, 0, 1.446, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { transform: matrix3d(1.442, 0, 0, 0, 0, 1.587, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10.14% { transform: matrix3d(1.468, 0, 0, 0, 0, 1.613, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.52% { transform: matrix3d(1.56, 0, 0, 0, 0, 1.666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { transform: matrix3d(1.57, 0, 0, 0, 0, 1.665, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.4% { transform: matrix3d(1.603, 0, 0, 0, 0, 1.62, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { transform: matrix3d(1.606, 0, 0, 0, 0, 1.591, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 21.18% { transform: matrix3d(1.599, 0, 0, 0, 0, 1.535, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { transform: matrix3d(1.575, 0, 0, 0, 0, 1.478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.06% { transform: matrix3d(1.569, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 28.84% { transform: matrix3d(1.533, 0, 0, 0, 0, 1.448, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { transform: matrix3d(1.524, 0, 0, 0, 0, 1.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { transform: matrix3d(1.49, 0, 0, 0, 0, 1.483, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.49% { transform: matrix3d(1.487, 0, 0, 0, 0, 1.489, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { transform: matrix3d(1.48, 0, 0, 0, 0, 1.512, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44.15% { transform: matrix3d(1.483, 0, 0, 0, 0, 1.516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { transform: matrix3d(1.496, 0, 0, 0, 0, 1.503, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.46% { transform: matrix3d(1.503, 0, 0, 0, 0, 1.495, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { transform: matrix3d(1.504, 0, 0, 0, 0, 1.496, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 74.77% { transform: matrix3d(1.501, 0, 0, 0, 0, 1.502, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { transform: matrix3d(1.499, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.09% { transform: matrix3d(1.499, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 99.33% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes bounce-in { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.38% { transform: matrix3d(1.157, 0, 0, 0, 0, 1.203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { transform: matrix3d(1.225, 0, 0, 0, 0, 1.302, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.76% { transform: matrix3d(1.327, 0, 0, 0, 0, 1.446, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { transform: matrix3d(1.442, 0, 0, 0, 0, 1.587, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10.14% { transform: matrix3d(1.468, 0, 0, 0, 0, 1.613, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.52% { transform: matrix3d(1.56, 0, 0, 0, 0, 1.666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { transform: matrix3d(1.57, 0, 0, 0, 0, 1.665, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.4% { transform: matrix3d(1.603, 0, 0, 0, 0, 1.62, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { transform: matrix3d(1.606, 0, 0, 0, 0, 1.591, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 21.18% { transform: matrix3d(1.599, 0, 0, 0, 0, 1.535, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { transform: matrix3d(1.575, 0, 0, 0, 0, 1.478, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.06% { transform: matrix3d(1.569, 0, 0, 0, 0, 1.469, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 28.84% { transform: matrix3d(1.533, 0, 0, 0, 0, 1.448, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { transform: matrix3d(1.524, 0, 0, 0, 0, 1.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { transform: matrix3d(1.49, 0, 0, 0, 0, 1.483, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.49% { transform: matrix3d(1.487, 0, 0, 0, 0, 1.489, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { transform: matrix3d(1.48, 0, 0, 0, 0, 1.512, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44.15% { transform: matrix3d(1.483, 0, 0, 0, 0, 1.516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { transform: matrix3d(1.496, 0, 0, 0, 0, 1.503, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.46% { transform: matrix3d(1.503, 0, 0, 0, 0, 1.495, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { transform: matrix3d(1.504, 0, 0, 0, 0, 1.496, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 74.77% { transform: matrix3d(1.501, 0, 0, 0, 0, 1.502, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { transform: matrix3d(1.499, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.09% { transform: matrix3d(1.499, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 99.33% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @-webkit-keyframes bounce-out { 0% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.38% { transform: matrix3d(1.343, 0, 0, 0, 0, 1.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { transform: matrix3d(1.275, 0, 0, 0, 0, 1.198, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.76% { transform: matrix3d(1.173, 0, 0, 0, 0, 1.054, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { transform: matrix3d(1.058, 0, 0, 0, 0, 0.913, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10.14% { transform: matrix3d(1.032, 0, 0, 0, 0, 0.887, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.52% { transform: matrix3d(0.94, 0, 0, 0, 0, 0.834, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { transform: matrix3d(0.93, 0, 0, 0, 0, 0.835, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.4% { transform: matrix3d(0.897, 0, 0, 0, 0, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { transform: matrix3d(0.894, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 21.18% { transform: matrix3d(0.901, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { transform: matrix3d(0.925, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.06% { transform: matrix3d(0.931, 0, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 28.84% { transform: matrix3d(0.967, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { transform: matrix3d(0.976, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { transform: matrix3d(1.01, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.49% { transform: matrix3d(1.013, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { transform: matrix3d(1.02, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44.15% { transform: matrix3d(1.017, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { transform: matrix3d(1.004, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.46% { transform: matrix3d(0.997, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { transform: matrix3d(0.996, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 74.77% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.09% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 99.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } @keyframes bounce-out { 0% { transform: matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.38% { transform: matrix3d(1.343, 0, 0, 0, 0, 1.297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 4.7% { transform: matrix3d(1.275, 0, 0, 0, 0, 1.198, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 6.76% { transform: matrix3d(1.173, 0, 0, 0, 0, 1.054, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 9.41% { transform: matrix3d(1.058, 0, 0, 0, 0, 0.913, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 10.14% { transform: matrix3d(1.032, 0, 0, 0, 0, 0.887, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 13.52% { transform: matrix3d(0.94, 0, 0, 0, 0, 0.834, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 14.11% { transform: matrix3d(0.93, 0, 0, 0, 0, 0.835, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 17.4% { transform: matrix3d(0.897, 0, 0, 0, 0, 0.88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 18.72% { transform: matrix3d(0.894, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 21.18% { transform: matrix3d(0.901, 0, 0, 0, 0, 0.965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24.32% { transform: matrix3d(0.925, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25.06% { transform: matrix3d(0.931, 0, 0, 0, 0, 1.031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 28.84% { transform: matrix3d(0.967, 0, 0, 0, 0, 1.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29.93% { transform: matrix3d(0.976, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35.54% { transform: matrix3d(1.01, 0, 0, 0, 0, 1.017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36.49% { transform: matrix3d(1.013, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41.04% { transform: matrix3d(1.02, 0, 0, 0, 0, 0.988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44.15% { transform: matrix3d(1.017, 0, 0, 0, 0, 0.984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52.15% { transform: matrix3d(1.004, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59.46% { transform: matrix3d(0.997, 0, 0, 0, 0, 1.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63.26% { transform: matrix3d(0.996, 0, 0, 0, 0, 1.004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 74.77% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85.49% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 90.09% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 99.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } }