Smiley Face

Smiley Face

HTML

 <div id="head">
 <div id="eyes">
     <div id="eyeright"></div>
     <div id="eyeleft"></div>
 </div>
<div id="mouth" style="width:100px;">
 </div></div>

CSS

/*-------------------------SmileyFace--------------------------------------*/
#head {height: 200px; width: 180px; border-radius: 90px; background: yellow; border: 1px solid black; vertical-align:80px; vertical-align: 50%; margin: auto;
-webkit-animation: head 15s infinite;
animation: head 15s infinite;
}
@-webkit-keyframes head {
  0% {
      transform: scale(.9, 1);}
  45% {
      transform: scale(1, 1);
      transform: rotateY( 0deg );}
  50% {
      transform: scale(1, 1);
      transform: rotateY(40deg);}
  60% {
      transform: scale(1, 1);
      transform: rotateY (-20deg);}
  70% {
      transform: scale(1, 1);
      transform: rotateY( 0deg );}
  100% {
      transform: scale(.9, 1);}
}
@keyframes head {
  0% {
      transform: scale(.9, 1);}
  45% {
      transform: scale(1, 1);
      transform: rotateY( 0deg );}
  50% {
      transform: scale(1, 1);
      transform: rotateY(40deg);}
  60% {
      transform: scale(1, 1);
      transform: rotateY (-20deg);}
  70% {
      transform: scale(1, 1);
      transform: rotateY( 0deg );}
  100% {
      transform: scale(.9, 1);}
}
#eyes {position: relative; top: 40%; width: 100%; height: 45px;
-webkit-animation: eyes2 5s infinite;
animation: eyes2 5s infinite;
}
@-webkit-keyframes eyes2 {
     0% {opacity: 1;}
    48% {opacity: 1;}
    50% {opacity: 0;}
    52% {opacity: 1;}
   100% {opacity: 1;}
}
@keyframes eyes2 {
     0% {opacity: 1;}
    48% {opacity: 1;}
    50% {opacity: 0;}
    52% {opacity: 1;}
   100% {opacity: 1;}
}

#eyeright {height: 30px; width: 30px; background: blue; position: relative; left: 20%; border-radius: 15px;display: inline-block;
}
#eyeleft {height: 30px; width: 30px; background: blue; position: relative; left: 80px; border-radius: 15px; display: inline-block;
}
#mouth {
 width:500px; height:100px;
 border:solid 5px #000;
 margin: auto;
 border-color:#000 transparent transparent transparent;
 transform: rotate(180deg);
 animation: mouthsm 10s infinite;
  -webkit-transform: rotate(180deg);
  -webkit-animation: mouthsm 10s infinite;
}
@-webkit-keyframes mouthsm {
       0% {border-radius: 100%/100px 100px 0 0;}
      20% {border-radius: 150%/100px 100px 0 0;}
      50% {border-radius: 50%/100px 100px 0 0;}
      70% {border-radius: 50%/100px 100px 0 0;}
     100% {border-radius: 100%/100px 100px 0 0;}
}
@keyframes mouthsm {
       0% {border-radius: 100%/100px 100px 0 0;}
      20% {border-radius: 150%/100px 100px 0 0;}
      50% {border-radius: 50%/100px 100px 0 0;}
      70% {border-radius: 50%/100px 100px 0 0;}
     100% {border-radius: 100%/100px 100px 0 0;}
}
 /*-------------------------EndSmileyFace--------------------------------------*/