/*======================================================== DARK LAYOUT =========================================================*/ @-webkit-keyframes rotate_pacman_half_up { 0% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @-moz-keyframes rotate_pacman_half_up { 0% { -moz-transform: rotate(270deg); transform: rotate(270deg); } 50% { -moz-transform: rotate(360deg); transform: rotate(360deg); } 100% { -moz-transform: rotate(270deg); transform: rotate(270deg); } } @-o-keyframes rotate_pacman_half_up { 0% { -o-transform: rotate(270deg); transform: rotate(270deg); } 50% { -o-transform: rotate(360deg); transform: rotate(360deg); } 100% { -o-transform: rotate(270deg); transform: rotate(270deg); } } @keyframes rotate_pacman_half_up { 0% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } 50% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } } @-webkit-keyframes rotate_pacman_half_down { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @-moz-keyframes rotate_pacman_half_down { 0% { -moz-transform: rotate(90deg); transform: rotate(90deg); } 50% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(90deg); transform: rotate(90deg); } } @-o-keyframes rotate_pacman_half_down { 0% { -o-transform: rotate(90deg); transform: rotate(90deg); } 50% { -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -o-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotate_pacman_half_down { 0% { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } } @-webkit-keyframes pacman-balls { 75% { opacity: .7; } 100% { -webkit-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px); } } @-moz-keyframes pacman-balls { 75% { opacity: .7; } 100% { -moz-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px); } } @-o-keyframes pacman-balls { 75% { opacity: .7; } 100% { -o-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px); } } @keyframes pacman-balls { 75% { opacity: .7; } 100% { -webkit-transform: translate(-100px, -6.25px); -moz-transform: translate(-100px, -6.25px); -o-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px); } } .pacman { position: relative; } .pacman > div:nth-child(2) { -webkit-animation: pacman-balls 1s -.99s infinite linear; -moz-animation: pacman-balls 1s -.99s infinite linear; -o-animation: pacman-balls 1s -.99s infinite linear; animation: pacman-balls 1s -.99s infinite linear; } .pacman > div:nth-child(3) { -webkit-animation: pacman-balls 1s -.66s infinite linear; -moz-animation: pacman-balls 1s -.66s infinite linear; -o-animation: pacman-balls 1s -.66s infinite linear; animation: pacman-balls 1s -.66s infinite linear; } .pacman > div:nth-child(4) { -webkit-animation: pacman-balls 1s -.33s infinite linear; -moz-animation: pacman-balls 1s -.33s infinite linear; -o-animation: pacman-balls 1s -.33s infinite linear; animation: pacman-balls 1s -.33s infinite linear; } .pacman > div:nth-child(5) { -webkit-animation: pacman-balls 1s 0s infinite linear; -moz-animation: pacman-balls 1s 0s infinite linear; -o-animation: pacman-balls 1s 0s infinite linear; animation: pacman-balls 1s 0s infinite linear; } .pacman > div:first-of-type { position: relative; left: -30px; width: 0; height: 0; -webkit-animation: rotate_pacman_half_up .5s 0s infinite; -moz-animation: rotate_pacman_half_up .5s 0s infinite; -o-animation: rotate_pacman_half_up .5s 0s infinite; animation: rotate_pacman_half_up .5s 0s infinite; border-top: 25px solid #b8c2cc; border-right: 25px solid transparent; border-bottom: 25px solid #b8c2cc; border-left: 25px solid #b8c2cc; border-radius: 25px; } .pacman > div:nth-child(2) { position: relative; left: -30px; width: 0; height: 0; margin-top: -50px; -webkit-animation: rotate_pacman_half_down .5s 0s infinite; -moz-animation: rotate_pacman_half_down .5s 0s infinite; -o-animation: rotate_pacman_half_down .5s 0s infinite; animation: rotate_pacman_half_down .5s 0s infinite; border-top: 25px solid #b8c2cc; border-right: 25px solid transparent; border-bottom: 25px solid #b8c2cc; border-left: 25px solid #b8c2cc; border-radius: 25px; } .pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) { position: absolute; top: 25px; left: 70px; width: 15px; width: 10px; height: 15px; height: 10px; margin: 2px; -webkit-transform: translate(0, -6.25px); -moz-transform: translate(0, -6.25px); -ms-transform: translate(0, -6.25px); -o-transform: translate(0, -6.25px); transform: translate(0, -6.25px); border-radius: 100%; background-color: #b8c2cc; }