CSS3 - UFO animation

by Jens Kühn

HTML

<div class="ufoInner">
    <div id='ufo'>
      <ul class='blinkers'>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="dome"></div>
      <div class="antigrav">
        <div class="rings">
          <div class="inner"></div>
          <ul>
            <li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
          </ul>
        </div><!-- end div.rings -->
      </div><!-- end div.antigrav -->
      <div class="thrust">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div><!-- end div.thrust -->
    </div><!-- end div#ufo -->
  </div><!-- end div#ufoInner -->

CSS

html, body{
  margin:0px; 
  padding:0px;
  height:100%;
}
body{
  overflow:hidden;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* -- ufo styles -- */

.ufoInner{position:relative; animation: ufo 20s ease-in-out infinite;opacity:0.5; }
@keyframes ufo { 50% {transform: translate(10px, -80px) scale(1.2) rotate(2deg);
    opacity:1.0; 
  
  }}
#ufo{
  width: 325px;
  height: 41px;
  margin: 0 auto;
  border-radius: 50%;
  background: #141618;
  box-shadow: inset -15px -4px 16px rgba(60, 29, 94, 0.2), inset 15px -4px 16px rgba(55, 50, 117, 0.19), inset 0px -4px 18px #313234, 0px -1px 0px #2b2e2a, 0px -3px 0px #222;
  position:relative;
}
#ufo:before{
content: ' ';
display: block;
width: 320px;
height: 41px;
position: relative;
margin: 0 auto;
border-radius: 50%;
background: #555;
box-shadow: inset 0px 2px 0px rgba(184, 232, 255, 0.78);
z-index: -1;
top: -7px;
}
ul.blinkers{
  margin: 0px;
  padding: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  display: block;
  height: 100%;
}
ul.blinkers li{
  list-style-type:none; 
  background:#758c8a;
  width:5px; 
  height:2px; 
  position:absolute; 
  border-radius:50%;
  box-shadow: 0px -1px 2px #000, 0px 3px 2px rgba(74, 196, 235, 0.16);
}
ul.blinkers li:nth-child(1){top: 23px;left: 45px;opacity:0.5;width:5px;}
ul.blinkers li:nth-child(2){left: 119px;top: 13px;}
ul.blinkers li:nth-child(3){right: 91px; top: 15px; opacity:0.7}
ul.blinkers li:nth-child(4){bottom: 14px; right: 33px; opacity:0.4;}
.dome{
width: 101px;
height: 24px;
background: #D3F0FF;
position: relative;
top: -55px;
z-index: -2;
margin: 0 auto;
border-radius: 50%;
left: 4px;
box-shadow: inset -11px 2px 4px #61A3DF, inset -10px -18px 9px #000, 0px 57px 28px rgba(121, 179, 218, 0.8);
border-top: 2px solid rgba(255,255,255,0.5);
}
.antigrav{
  width: 133px;
  height: 14px;
  margin: 0 auto;
  background: #8ca6b9;
  position: relative;
  left: 3px;
  border-radius: 50%;
  top: -38px; 
  overflow:hidden; 
 ...