```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>社交ダンスフットプリント</title>
  <style>
    @keyframes danceMove {
      0% { transform: translate(0, 0) rotate(0deg); }
      25% { transform: translate(20px, -10px) rotate(10deg); }
      50% { transform: translate(0px, 0px) rotate(-10deg); }
      75% { transform: translate(-20px, -10px) rotate(10deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }

    @keyframes clickReaction {
      0% { transform: scale(1); }
      50% { transform: scale(1.5); }
      100% { transform: scale(1); }
    }

    .dancer {
      animation: danceMove 2s infinite;
      cursor: pointer;
    }

    .clicked {
      animation: clickReaction 0.5s;
    }

    @keyframes buttonBounce {
      0% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0); }
    }

    .button {
      animation: buttonBounce 1s infinite;
    }
  </style>
</head>
<body>
  <div style="width:400px; height:400px; position:relative; background-color:#f0f8ff; overflow:hidden; border:2px solid #000; border-radius:10px;">
    <div id="dancer1" class="dancer" style="position:absolute; top:50%; left:30%; font-size:50px;">🕺</div>
    <div id="dancer2" class="dancer" style="position:absolute; top:50%; left:60%; font-size:50px;">💃</div>
    <div style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%);">
      <button onclick="moveDancers()" style="font-size:20px; padding:10px; margin:5px; border:none; border-radius:5px; background-color:#ff69b4; color:white;">✨💥</button>
      <button onclick="moveDancers()" style="font-size:20px; padding:10px; margin:5px; border:none; border-radius:5px; background-color:#1e90ff; color:white;">🎉🎶</button>
      <button onclick="moveDancers()" style="font-size:20px; padding:10px; margin:5px; border:none; border-radius:5px; background-color:#32cd32; color:white;">🔥🎈</button>
    </div>
  </div>

  <script>
    function moveDancers() {
      const dancers = document.querySelectorAll('.dancer');
      dancers.forEach(dancer => {
        dancer.classList.add('clicked');
        setTimeout(() => {
          dancer.classList.remove('clicked');
        }, 500);
      });
    }

    document.getElementById('dancer1').addEventListener('click', moveDancers);
    document.getElementById('dancer2').addEventListener('click', moveDancers);

    // Optional: Keyboard controls
    document.addEventListener('keydown', function(event) {
      if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(event.key)) {
        moveDancers();
      }
    });
  </script>
</body>
</html>
```