html human

<style>
 @keyframes atumi{
   0%{ height: 0; } 
   30%{ height: 0; } 
   70%{ height: 10px; } 
   100%{ height: 10px; } 
 }
</style>
<div style="position:relative;">

  <div style="display:flex;margin:15px;">
    <div style="text-align:center;width:35%;">
      <div style="display:inline-block; padding:0;">
        <div style="border:3px solid black;border-radius:100%;background:darkgray;width:30px;height:30px;position:relative;padding:0;">
          <div style="padding:0;animation: 5s ease 2s infinite alternate both running atumi;  margin       : auto;
  overflow     : hidden;
  position     : absolute;
  width        : 12px;
  height       : 6px;
  left: 2pt;
  top: 8pt;
  background   : linear-gradient(to bottom, #ffff1a, #ffffff);
  border-radius: 50%/100% 100% 0 0;
  transform    : rotate(185deg);">
          </div>
          <div style="padding:0; animation: 5.3s ease 1.7s infinite alternate both running atumi;  margin       : auto;
  overflow     : hidden;
  position     : absolute;
  width        : 12px;
  height       : 6px;
  left: 7pt;
  top: 16pt;
  background   : linear-gradient(to bottom, #ff1a1a, #ffffff);
  border-radius: 50%/100% 100% 0 0;
  transform    : rotate(185deg);">
          </div>
        </div>
        <div style="border:3px solid black;border-radius:3px;background:darkgray;width:30px;height:30px;padding:0;">
        </div>
      </div>
      <br>
      <div style="display:inline-block;">evil</div>
    </div>

 
    <div style="text-align:center;width:35%;">
      <div style="display:inline-block;padding:0;">
        <div style="border:3px solid blue;border-radius:100%;background:#ccccee;width:30px;height:30px;padding:0;">
        </div>
        <div style="border:3px solid blue;border-radius:3px;background:#ccccee;width:30px;height:30px;padding:0;">
        </div>
      </div>
      <br>
      <div>human</div>
    </div>
  </div>

</div>