.rotate-clockwise { animation: infinite-rotation 500s linear infinite; } .rotate-counter-clockwise { animation: infinite-rotation 500s linear infinite; animation-direction: reverse; } #bizrate-logo { animation: infinite-rotation 5ms linear infinite; } #secure-site { animation: infinite-rotation 5ms linear infinite; } #special-promotions { animation: grow-shrink 5s ease-in-out infinite; } #geforce { animation-name: grow; animation-timing-function: cubic-bezier(1, 0, 0.33, 1); animation-iteration-count: infinite; animation-duration: 180s; } #ebgamesguy { position: fixed; bottom: -10rem; right: 5rem; float: right; width: auto; height: auto; max-width: 100%; animation: crawl-up 10s linear 0s 1; } #ebgamesguy-txt-speech-container { position: absolute; left: -50px; top: -130px; max-width: 75%; width: auto; height: auto; display: none; opacity: 100%; animation: fade-in 15s linear 0s 1; } #ebgamesguy-txt-container { position: absolute; z-index: 1; display: flex; width: 100%; height: 100%; max-width: 65%; max-height: 80%; align-items: center; top: 0; bottom: 0; left: 5%; right: 0; } #ebgamesguy-txt { text-align: center; width: 100%; max-width: 100%; overflow-wrap: break-word; } #ebgamesguy-speech-container { max-width: 75%; width: auto; height: auto; transform: rotateY(180deg); } #ebgamesguy-speech { max-width: 100%; width: auto; height: auto; } @keyframes crawl-up { 0% { bottom: -34rem; } 50% { bottom: -34rem; } 51% { bottom: -32rem; } 54% { bottom: -30rem; } 62% { bottom: -29rem; } 65% { bottom: -27rem; } 76% { bottom: -21rem; } 77% { bottom: -20rem; } 84% { bottom: -16rem; } 89% { bottom: -13rem; } 96% { bottom: -12rem; } 100% { bottom: -10rem; } } @keyframes fade-in { 0% { opacity: 0%; } 70% { opacity: 0%; } 71% { opacity: 10%; } 72% { opacity: 25%; } 76% { opacity: 33%; } 77% { opacity: 40%; } 83% { opacity: 47%; } 84% { opacity: 57%; } 87% { opacity: 63%; } 90% { opacity: 71%; } 96% { opacity: 86%; } 100% { opacity: 100%; } } @keyframes grow { 0% { transform: scale(1); } 100% { transform: scale(5); } } @keyframes grow-shrink { 0% { transform: scale(1) rotate(0deg); } 25% { transform: rotate(-30deg); } 50% { transform: scale(2) rotate(0deg); } 75% { transform: rotate(30deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes infinite-rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }