<html>
<head>
	<title>Google Move</title>
	<link href="https://fonts.googleapis.com/css?family=Spectral" rel="stylesheet">
  </head>
<body>
<div id="googlelogo">
	<div>G</div>
	<div>o</div>
	<div>o</div>
	<div>g</div>
	<div>l</div>
	<div>e</div>
</div>
</body>
</html>
body {
			background: #EEE;
			margin: 0px;
			padding: 0px;
		}
		* {
			font-family: 'Spectral', serif;
			transition: all 0.4s ease;
		}
		#googlelogo {
			width: 250px;
			height: 150px;
			margin: 10% auto 0 auto;
		}
		#googlelogo div {
			height: 75px;
			text-align: center;
			float: left;
			font-size: 75px;
			font-weight: bold;
			margin-top: 75px;
			text-shadow: 0px 0px 0px #999;
		}
		#googlelogo div:nth-of-type(1) {
			color: #4285f4;
			animation: google1 1s ease 0.1s infinite ;
		}
		#googlelogo div:nth-of-type(2) {
			color: #ea4335;
			animation: google2 1s ease 0.1s infinite ; /* alternate */
		}
		#googlelogo div:nth-of-type(3) {
			color: #fbbc05;
			animation: google3 1s ease 0.1s infinite ;
		}
		#googlelogo div:nth-of-type(4) {
			color: #4285f4;
			animation: google4 1s ease 0.1s infinite ;
		}
		#googlelogo div:nth-of-type(5) {
			color: #34a853;
			animation: google5 1s ease 0.1s infinite ;
		}
		#googlelogo div:nth-of-type(6) {
			color: #ea4335;
			animation: google6 1s ease 0.1s infinite ;
		}
		@keyframes google1 {
			0% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			14% {
				margin-top: 0px; text-shadow: 0px 70px 10px #999; transform: scale(1,2);
			}
			28% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			42% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			56% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			70% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			84% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
		}
		@keyframes google2 {
			0% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			14% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			28% {
				margin-top: 0px; text-shadow: 0px 70px 10px #999; transform: scale(1,2);
			}
			42% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			56% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			70% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			84% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
		}
		@keyframes google3 {
			0% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			14% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			28% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			42% {
				margin-top: 0px; text-shadow: 0px 70px 10px #999; transform: scale(1,2);
			}
			56% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			70% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			84% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
		}
		@keyframes google4 {
			0% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			14% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			28% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			42% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			56% {
				margin-top: 0px; text-shadow: 0px 70px 10px #999; transform: scale(1,2);
			}
			70% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			84% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
		}
		@keyframes google5 {
			0% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			14% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			28% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			42% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			56% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			70% {
				margin-top: 0px; text-shadow: 0px 70px 10px #999; transform: scale(1,2);
			}
			84% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
		}
		@keyframes google6 {
			0% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			14% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			28% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			42% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			56% {
				margin-top: 75px; text-shadow: 0px 0px 0px #999; transform: scale(1,1);
			}
			70% {
			}
			84% {
				margin-top: 0px; text-shadow: 0px 70px 10px #999; transform: scale(1,2);
			}
		}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.