<html>
<head>
<style>
body {
  background-color: OliveDrab;
  overflow-x: hidden;
  overflow-y: hidden;
}

.bug{
  position: absolute;
  top:400px;
  right:250px;
  animation:animated_bug 20s 1 linear;
  -webkit-animation:animated_bug 20s 1 linear;
}

@keyframes animated_bug
{
  12% {transform: translate(-20px, 50px,) rotate(-90deg);}
  25% {transform: translate(-200px, -500px,) rotate(-180deg);}
  37% {transform: translate(20px, 50px,) rotate(-270deg);}
  50% {transform: translate(200px, 500px,) rotate(-360deg);}
  62% {transform: translate(50px, 50px,) rotate(-450deg);}
  75% {transform: translate(50px, 50px) rotate(-540deg);}
  87% {transform: translate(50px, 50px) rotate(-630deg);}
  100% {transform: translate(0px, 0px) rotate(-720deg);}
}

@-webkit-keyframes animated_bug
{
  12% {-webkit-transform: translate(-20px, 50px,) rotate(-90deg);}
  25% {-webkit-transform: translate(-200px, -500px,) rotate(-180deg);}
  37% {-webkit-transform: translate(20px, 50px,) rotate(-270deg);}
  50% {-webkit-transform: translate(200px, 500px,) rotate(-360deg);}
  62% {-webkit-transform: translate(50px, 50px,) rotate(-450deg);}
  75% {-webkit-transform: translate(50px, 50px) rotate(-540deg);}
  87% {-webkit-transform: translate(50px, 50px) rotate(-630deg);}
  100% {-webkit-transform: translate(0px, 0px) rotate(-720deg);}
}

.ladybug{
  position: absolute;
  top: 10px;
  left: 90px;
  width: 100px;
  height: 150px;
  border-radius: 40%;
  background-color: black;
}

.wing {
  background-color: red;
  z-index:1;
  margin: 1px 1px 0 0;  
}

#wingleft {
  width: 50px;
  height: 100px;
  border-top-right-radius: 0px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 20px;
  animation:animated_wingl 10s 2 linear;
  -webkit-animation:animated_wingl 10s linear;
  -webkit-animation-iteration-count:2;
  position: absolute;
  top: 53px;
  left: 89px;}
  
#wingright {
  width: 50px;
  height: 100px;
  border-top-right-radius: 20px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 50px;
  animation:animated_wingr 10s 2 linear;
  -webkit-animation:animated_wingr 10s linear;
  -webkit-animation-iteration-count:2;
  position: absolute;
  top: 53px;
  left: 141px;}

@keyframes animated_wingr
{
  0%   {transform: rotate(0deg);}
  10%   {transform: rotate(-10deg);}
  20%   {transform: rotate(0deg);}
  30%   {transform: rotate(-10deg);}
  40%   {transform: rotate(0deg);}
  50%   {transform: rotate(-10deg);}
  60%   {transform: rotate(0deg);}
  70%   {transform: rotate(-10deg);}
  80%   {transform: rotate(0deg);}
  90%   {transform: rotate(-10deg);}
  100% {transform: rotate(0deg);}
}

@-webkit-keyframes animated_wingr
{
  0%   {-webkit-transform: rotate(0deg);}
  10%   {-webkit-transform: rotate(-10deg);}
  20%   {-webkit-transform: rotate(0deg);}
  30%   {-webkit-transform: rotate(-10deg);}
  40%   {-webkit-transform: rotate(0deg);}
  50%   {-webkit-transform: rotate(-10deg);}
  60%   {-webkit-transform: rotate(0deg);}
  70%   {-webkit-transform: rotate(-10deg);}
  80%   {-webkit-transform: rotate(0deg);}
  90%   {-webkit-transform: rotate(-10deg);}
  100% {-webkit-transform: rotate(0deg);}
}

@keyframes animated_wingl
{
  0%   {transform: rotate(0deg);}
  10%   {transform: rotate(10deg);}
  20%   {transform: rotate(0deg);}
  30%   {transform: rotate(10deg);}
  40%   {transform: rotate(0deg);}
  50%   {transform: rotate(10deg);}
  60%   {transform: rotate(0deg);}
  70%   {transform: rotate(10deg);}
  80%   {transform: rotate(0deg);}
  90%   {transform: rotate(10deg);}
  100% {transform: rotate(0deg);}
}

@-webkit-keyframes animated_wingl
{
  0%   {-webkit-transform: rotate(0deg);}
  10%   {-webkit-transform: rotate(10deg);}
  20%   {-webkit-transform: rotate(0deg);}
  30%   {-webkit-transform: rotate(10deg);}
  40%   {-webkit-transform: rotate(0deg);}
  50%   {-webkit-transform: rotate(10deg);}
  60%   {-webkit-transform: rotate(0deg);}
  70%   {-webkit-transform: rotate(10deg);}
  80%   {-webkit-transform: rotate(0deg);}
  90%   {-webkit-transform: rotate(10deg);}
  100% {-webkit-transform: rotate(0deg);}
}

.eye{
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  position: absolute;
  top: 20px;
  left: 110px;
  z-index:1;
}

.eye2{
  width:20px;
  height:20px;
  background:white;
  border-radius:50%;
  position: absolute;
  top: 20px;
  left: 150px;
  z-index:1;
}

.eyelid{
  width:25px;
  height:25px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 28px;
  left: 108px;
  animation:animated_lid 2s 12;
  -webkit-animation:animated_lid 2s;
  -webkit-animation-iteration-count:12;
  z-index:2;
}

.eyelid2{
  width:25px;
  height:25px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 28px;
  left: 148px;
  animation:animated_lid2 2s 12;
  -webkit-animation:animated_lid2 2s;
  -webkit-animation-iteration-count:12;
  z-index:2;
}

@keyframes animated_lid
{
   0%   {transform: left:108; top:28;}
  60%  {transform: left:108; top:28;}
  70%   {transform: left: 108; top:20;}
  80%  {transform: left:108;top:28;}
  90%  {transform: left:108; top:20;}
  100%  {transform: left:108;top:28;}
}

@-webkit-keyframes animated_lid
{
   0%   {-webkit-transform: left:108; top:28;}
  60%  {-webkit-transform: left:108; top:28;}
  70%   {-webkit-transform: left: 108; top:20;}
  80%  {-webkit-transform: left:108;top:28;}
  90%  {-webkit-transform: left:108; top:20;}
  100%  {-webkit-transform: left:108;top:28;}
}

@keyframes animated_lid2
{
   0%   {transform: left:148; top:28;}
  60%  {transform: left:148; top:28;}
  70%   {transform: left: 148; top:20;}
  80%  {transform: left:148;top:28;}
  90%  {transform: left:148; top:20;}
 100%  {transform: left:148;top:28;}
}

@-webkit-keyframes animated_lid2
{
   0%   {-webkit-transform: left:148; top:28;}
  60%  {-webkit-transform: left:148; top:28;}
  70%   {-webkit-transform: left: 148; top:20;}
  80%  {-webkit-transform: left:148;top:28;}
  90%  {-webkit-transform: left:148; top:20;}
 100%  {-webkit-transform: left:148;top:28;}
}

.eyespot{
  width:10px;
  height:10px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 20px;
  left: 115px;
  z-index: 2;
}

.eyespot2{
  width:10px;
  height:10px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 20px;
  left: 155px;
  z-index:2;
}

.spot{
  width:20px;
  height:20px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 120px;
  left: 100px;
  z-index:3;
}

.spot2{
  width:20px;
  height:20px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 120px;
  left: 160px;
  z-index:3; 
}

.spot3{
  width:20px;
  height:20px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 90px;
  left: 115px;
  z-index:3;
}

.spot4{
  width:20px;
  height:20px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 90px;
  left: 145px;
  z-index:3;
}

.spot5{
  width:20px;
  height:20px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 60px;
  left: 100px;
  z-index:3;
}

.spot6{
  width:20px;
  height:20px;
  background:black;
  border-radius:50%;
  position: absolute;
  top: 60px;
  left: 160px;
  z-index:3;
}

.leg{
  width:7px;
  height:160px;
  background-color:black;
  border-radius:50%;
  z-index:-3;
  position:absolute;
  top:20px;
  left:138px;
  -webkit-transform:rotate(55deg);
  -moz-transform:rotate(55deg);
  rotation:55deg;
  animation:animated_leg 2s 10;
  -webkit-animation:animated_leg 2s;
  -webkit-animation-iteration-count:10;
}

.leg2{
  width:7px;
  height:140px;
  background-color:black;
  border-radius:50%;
  z-index:-1;
  position:absolute;
  top:30px;
  left:138px;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  rotation:90deg;
  animation:animated_leg2 2s 10;
  -webkit-animation:animated_leg2 2s;
  -webkit-animation-iteration-count:10;
}

.leg3{
  width:7px;
  height:160px;
  background-color:black;
  border-radius:50%;
  z-index:-2;
  position:absolute;
  top:20px;
  left: 138px;
  -webkit-transform:rotate(125deg);
  -moz-transform:rotate(125deg);
  rotation:125deg;
  animation:animated_leg3 2s 10;
  -webkit-animation:animated_leg3 2s;
  -webkit-animation-iteration-count:10;
}

@keyframes animated_leg
{
  0%   {transform: rotate(50deg);}
  10%   {transform: rotate(60deg);}
  20%   {transform: rotate(50deg);}
  30%   {transform: rotate(60deg);}
  40%   {transform: rotate(50deg);}
  50%   {transform: rotate(60deg);}
  60%   {transform: rotate(50deg);}
  70%   {transform: rotate(60deg);}
  80%   {transform: rotate(50deg);}
  90%   {transform: rotate(60deg);}
  100% {transform: rotate(50deg);}
}

@-webkit-keyframes animated_leg
{
  0%   {-webkit-transform: rotate(50deg);}
  10%   {-webkit-transform: rotate(60deg);}
  20%   {-webkit-transform: rotate(50deg);}
  30%   {-webkit-transform: rotate(60deg);}
  40%   {-webkit-transform: rotate(50deg);}
  50%   {-webkit-transform: rotate(60deg);}
  60%   {-webkit-transform: rotate(50deg);}
  70%   {-webkit-transform: rotate(60deg);}
  80%   {-webkit-transform: rotate(50deg);}
  90%   {-webkit-transform: rotate(60deg);}
  100% {-webkit-transform: rotate(50deg);}
}

@keyframes animated_leg2
{
  0%   {transform: rotate(85deg);}
  10%   {transform: rotate(95deg);}
  20%   {transform: rotate(85deg);}
  30%   {transform: rotate(95deg);}
  40%   {transform: rotate(85deg);}
  50%   {transform: rotate(95deg);}
  60%   {transform: rotate(85deg);}
  70%   {transform: rotate(95deg);}
  80%   {transform: rotate(85deg);}
  90%   {transform: rotate(95deg);}
  100% {transform: rotate(85deg);}
}

@-webkit-keyframes animated_leg2
{
  0%   {-webkit-transform: rotate(85deg);}
  10%   {-webkit-transform: rotate(95deg);}
  20%   {-webkit-transform: rotate(85deg);}
  30%   {-webkit-transform: rotate(95deg);}
  40%   {-webkit-transform: rotate(85deg);}
  50%   {-webkit-transform: rotate(95deg);}
  60%   {-webkit-transform: rotate(85deg);}
  70%   {-webkit-transform: rotate(95deg);}
  80%   {-webkit-transform: rotate(85deg);}
  90%   {-webkit-transform: rotate(95deg);}
  100% {-webkit-transform: rotate(85deg);}
}

@keyframes animated_leg3
{
  0%   {transform: rotate(120deg);}
  10%   {transform: rotate(130deg);}
  20%   {transform: rotate(120deg);}
  30%   {transform: rotate(130deg);}
  40%   {transform: rotate(120deg);}
  50%   {transform: rotate(130deg);}
  60%   {transform: rotate(120deg);}
  70%   {transform: rotate(130deg);}
  80%   {transform: rotate(120deg);}
  90%   {transform: rotate(130deg);}
  100% {transform: rotate(120deg);}
}

@-webkit-keyframes animated_leg3
{
  0%   {-webkit-transform: rotate(120deg);}
  10%   {-webkit-transform: rotate(130deg);}
  20%   {-webkit-transform: rotate(120deg);}
  30%   {-webkit-transform: rotate(130deg);}
  40%   {-webkit-transform: rotate(120deg);}
  50%   {-webkit-transform: rotate(130deg);}
  60%   {-webkit-transform: rotate(120deg);}
  70%   {-webkit-transform: rotate(130deg);}
  80%   {-webkit-transform: rotate(120deg);}
  90%   {-webkit-transform: rotate(130deg);}
  100% {-webkit-transform: rotate(120deg);}
}

</style>
</head>
<body>
<div class="bug">
  <div class="ladybug"></div>
  <div id="wingleft" class="wing"> </div>
  <div id="wingright" class="wing"> </div>
  <div class="eye"> </div>
  <div class="eye2"> </div>
  <div class="eyelid"> </div>
  <div class="eyelid2"> </div>
  <div class="eyespot"> </div>
  <div class="eyespot2"> </div>
  <div class="spot"> </div>
  <div class="spot2"> </div>
  <div class="spot3"> </div>
  <div class="spot4"> </div>
  <div class="spot5"> </div>
  <div class="spot6"> </div>
  <div class="leg"> </div>
  <div class="leg2"> </div>
  <div class="leg3"> </div>
</div>
</body>
</html>