My Logo 2

html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #333;
}

/*Bg Animated*/

html,
body{
      background: #444;    
 }
i {
  -webkit-animation: bounce 1.125s ease-in-out infinite alternate;
          animation: bounce 1.125s ease-in-out infinite alternate;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
          transform: translate3d(0, 0, 0) scale(1);
  text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  font-family: "Product Sans", "Helvetica Neue", "Helvetica", sans-serif;
  font-size: 20vmin;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}
i:nth-child(1) {
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  color: #4285f4;
}
i:nth-child(2) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  color: #ea4335;
}
i:nth-child(3) {
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  color: #fbbc05;
}
i:nth-child(4) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  color: #4285f4;
}
i:nth-child(5) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  color: #34a853;
}
i:nth-child(6) {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  color: #ea4335;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  }
  100% {
    -webkit-transform: translate3d(0, -1em, 0) scale(1.1);
            transform: translate3d(0, -1em, 0) scale(1.1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0 0.02222em;
  }
  100% {
    -webkit-transform: translate3d(0, -1em, 0) scale(1.1);
            transform: translate3d(0, -1em, 0) scale(1.1);
    text-shadow: rgba(0, 0, 0, 0.35) 0 0.90909em 0.2em;
  }
}

/* LOGO*/

 background:#000;
}
#logo:active {
    position: relative;
    top: 1px;
}
 html {
    height: 10;
    background-color: #fff;
    background-image: linear-gradient
(135deg,#00BFFF, #00BFFF, #8A2BE2, #9932CC ,#9ACD32);
}

<div>
<p align="center">
<i>M</i><i>Y</i><i>S</i><i>2</i><i>0</i><i>1</i><i>0</i>
</div>

<p align="center">
<a href="http://demoshow-mys2010.blogspot.co.id/2016/02/logo-mys2010.html">
<img src="https://sites.google.com/site/pelajaranku1/fileku/logo-mys2010.png"
name="e902" border="0" width="300" height="200" /></a>
<font size="2" color=" green "face="Time newroman">CIBEBER CIMAHI</font>
</center>

<header>
<div class="page-wrap clearfix">
<p align="center">
<font size="2" color="green"face="arial"> 
<a href="http://demoshow-mys2010.blogspot.co.id/2015/12/
belajar-mp3-dengan-auto-slide.html" title="Myscript2010">
WEB DESIGN MYSCRIPT2010 ANIMATED LOGO</a>
<font size="2" color="#dad"face="arial">* * *</a>
</header>

Edited by. Myscript2010 on Codepen

DEMOSHOW