<link rel="stylesheet" type="text/css" href="style.css"/>

<div class="wrap">
	<div class="hantu">
		<div class="hantu_mata">
			<span></span>
			<span></span>
		</div>
		<div class="hantu_mulut">
			<span></span>
		</div>
		<div class="hantu_ekor">
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
</div>






		
body{
  background: black
}
.wrap{width:90%;margin:auto;}

.hantu{
  animation: goyang 8s infinite;
  background: white;
  border-radius: 10em 10em 0 0;
  color: #000;
  height: 355px;
  position: relative;
  text-align: center;
  width: 225px;
  margin:auto;
}

.hantu_mata, .hantu_mulut{
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1;
}
.hantu_mata{
  animation: mata 3s infinite;
  top: 45%;
}
.hantu_mata span{
  width: 50px;
  height: 50px;
}
.hantu_mulut{
  animation: mulut 3s infinite;
  top: 70%;
}
.hantu_mulut span{
  height: 30px;
  width: 30px;
}
.hantu span{
  background: #222;
  border-radius: 30px;
  display: inline-block;
  margin: 15px;
}

.hantu_ekor span {
  width: 68px;
  height: 98px;
  background-color: #fff;
  position: absolute; 
  left:-18px;
  bottom: -62px;
  border-radius: 50%;
  animation: ekor 3s infinite;

}
.hantu_ekor span:nth-child(2){
    left:28%;
  bottom: -62px;
  animation: ekor 3s infinite;
}
.hantu_ekor span:nth-child(1){
    left:145px;
  bottom: -62px;
  animation: ekor 3s infinite;
}


@keyframes mata {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
}
@keyframes mulut {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1, 2, 1);
  }
}

@keyframes goyang {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-15px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(15px, 0, 0);
  }
}

@keyframes ekor {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(3px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(-3px, 0, 0);
  }
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.