.kotak1 {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    transition: all 0.2s linear;
  }
  .kotak2 {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 8px;
    transition: all 0.2s linear;
  }
  #merah { background: red; }
  #biru { background: blue; }
  #info { position: fixed; bottom: 10px; left: 10px; font-family: sans-serif; }

  @keyframes kelapKelip {
0% { filter: drop-shadow(0 0 2px white); }
50% { filter: drop-shadow(0 0 10px yellow); }
100% { filter: drop-shadow(0 0 2px white); }
}
.kelap {
animation: kelapKelip 0.6s infinite;
}

@keyframes apiSerang {
0%   { box-shadow: 0 0 10px red; }
50%  { box-shadow: 0 0 20px orange; }
100% { box-shadow: 0 0 10px red; }
}
.serang-api {
animation: apiSerang 0.3s ease-out;
}

@keyframes gerakLiar {
0%   { transform: translate(0, 0) rotate(0deg); }
25%  { transform: translate(-10px, 5px) rotate(10deg); }
50%  { transform: translate(10px, -5px) rotate(-10deg); }
75%  { transform: translate(-5px, 10px) rotate(5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
.liar {
animation: gerakLiar 0.4s ease-in-out;
}