A CodePen by Sergio Tapia Gutierrez. Google Logo with CSS3 Animations. - This is taken from the logo that appears on the main Google website: http://www.google.com The icon has a nice animation effect, and I wanted to recreate it using CSS3 animations.

index.html

<h1>Google Logo with CSS3 Animations</h1>

<p>Another one of my experiments while learning about CSS3 animations and transitions. @lostinthegc</p>

<div class="wrap">
  
<img src="http://i.imgur.com/e8LMT.png" /> <!-- Original logo. -->

<div class="pen"> <!-- Sexy times logo.-->
  <div class="blue"></div>
  <div class="red"></div>
  <div class="yellow"></div>
  <div class="green"></div>
</div>

</div>

style.css

body {
  background-color:#01225C;
}

.pen {
  height:35px;
  width:32px;
  position:relative;
  float:left;
  margin-top:5px;
}

.blue {
  height:9px;
  width:9px;
  border-radius:5px;
  background: #0081ff; /* Old browsers */
  background: -moz-linear-gradient(top,  #0081ff 0%, #0069dd 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0081ff), color-stop(100%,#0069dd)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #0081ff 0%,#0069dd 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #0081ff 0%,#0069dd 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #0081ff 0%,#0069dd 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #0081ff 0%,#0069dd 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0081ff', endColorstr='#0069dd',GradientType=0 ); /* IE6-9 */

  position:absolute;
  top:5px;
  left:5px;
  
  -webkit-animation-name: blueslide;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

.red {
  height:9px;
  width:9px;
  border-radius:5px;
  background: #ff7153; /* Old browsers */
background: -moz-linear-gradient(top,  #ff7153 0%, #d50b08 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7153), color-stop(100%,#d50b08)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ff7153 0%,#d50b08 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ff7153 0%,#d50b08 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ff7153 0%,#d50b08 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ff7153 0%,#d50b08 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7153', endColorstr='#d50b08',GradientType=0 ); /* IE6-9 */

  position:absolute;
  top:5px;
  left:17px;
  
   -webkit-animation-name: redslide;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

.yellow {
  height:9px;
  width:9px;
  border-radius:5px;
  background: #ffd52b; /* Old browsers */
background: -moz-linear-gradient(top,  #ffd52b 0%, #ffb63e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd52b), color-stop(100%,#ffb63e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffd52b 0%,#ffb63e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffd52b 0%,#ffb63e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffd52b 0%,#ffb63e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffd52b 0%,#ffb63e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd52b', endColorstr='#ffb63e',GradientType=0 ); /* IE6-9 */

  position:absolute;
  top:18px;
  left:5px;
  
   -webkit-animation-name: yellowslide;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

.green {
  height:9px;
  width:9px;
  border-radius:5px;
  background: #2daf45; /* Old browsers */
background: -moz-linear-gradient(top,  #2daf45 0%, #007e40 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2daf45), color-stop(100%,#007e40)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2daf45 0%,#007e40 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2daf45 0%,#007e40 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2daf45 0%,#007e40 100%); /* IE10+ */
background: linear-gradient(to bottom,  #2daf45 0%,#007e40 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2daf45', endColorstr='#007e40',GradientType=0 ); /* IE6-9 */

  position:absolute;
  top:18px;
  left:17px;
  
  -webkit-animation-name: greenslide;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

@-webkit-keyframes blueslide {
   0% { -webkit-transform: translateX(0px); }
   100% { -webkit-transform: translateX(12px) translateY(12px); }   
}

@-webkit-keyframes redslide {
   0% { -webkit-transform: translateX(0px); }
   100% { -webkit-transform: translateX(-12px) translateY(12px); }   
}

@-webkit-keyframes yellowslide {
   0% { -webkit-transform: translateX(0px); }
   100% { -webkit-transform: translateX(12px) translateY(-12px); }   
}

@-webkit-keyframes greenslide {
   0% { -webkit-transform: translateX(0px); }
   100% { -webkit-transform: translateX(-12px) translateY(-12px); }   
}

h1 {
  color:#ffffff;
  font-family:Helvetica;
  text-align:center;
}

p {
  color:#ffffff;
	font-family:Georgia, serif;
  text-align:center;
  border-bottom:1px solid #fff;
  width:750px;
  margin:0 auto;
  padding-bottom:10px;
}

.wrap {
	width:90px;
  margin:0 auto;
  margin-top:30px;
  overflow:hidden;
}

img {
  display:block;
  float:left;
  margin-right:15px;
}