```html
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}

@keyframes floatReverse {
  0% { transform: translateY(0px); }
  50% { transform: translateY(20px); }
  100% { transform: translateY(0px); }
}

@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div style="width:400px; height:400px; position:relative; overflow:hidden; background-color:#ffe4e1; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px solid #ff69b4; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.3);">

  <!-- Floating Emojis -->
  <div style="position:absolute; top:10px; left:20px; font-size:24px; animation: float 3s ease-in-out infinite;">🐕</div>
  <div style="position:absolute; top:50px; left:80px; font-size:28px; animation: floatReverse 4s ease-in-out infinite;">🐈</div>
  <div style="position:absolute; top:100px; left:30px; font-size:26px; animation: float 5s ease-in-out infinite;">🦉</div>
  <div style="position:absolute; top:150px; left:120px; font-size:30px; animation: floatReverse 3.5s ease-in-out infinite;">🐰</div>
  <div style="position:absolute; top:200px; left:60px; font-size:25px; animation: float 4.5s ease-in-out infinite;">🦔</div>
  <div style="position:absolute; top:250px; left:140px; font-size:27px; animation: floatReverse 3s ease-in-out infinite;">🦄</div>
  <div style="position:absolute; top:300px; left:20px; font-size:29px; animation: float 4s ease-in-out infinite;">🦑</div>
  <div style="position:absolute; top:350px; left:100px; font-size:24px; animation: floatReverse 5s ease-in-out infinite;">🐹</div>
  <div style="position:absolute; top:80px; right:30px; font-size:26px; animation: float 3.5s ease-in-out infinite;">🐇</div>
  <div style="position:absolute; top:130px; right:80px; font-size:28px; animation: floatReverse 4s ease-in-out infinite;">🦝</div>
  <div style="position:absolute; top:180px; right:40px; font-size:25px; animation: float 4.5s ease-in-out infinite;">🐥</div>
  <div style="position:absolute; top:230px; right:100px; font-size:27px; animation: floatReverse 3s ease-in-out infinite;">🐿</div>
  <div style="position:absolute; top:280px; right:20px; font-size:29px; animation: float 4s ease-in-out infinite;">🦐</div>
  <div style="position:absolute; top:330px; right:80px; font-size:24px; animation: floatReverse 5s ease-in-out infinite;">🦋</div>
  <div style="position:absolute; top:60px; left:200px; font-size:30px; animation: float 6s ease-in-out infinite;">🦈</div>
  <div style="position:absolute; top:220px; left:200px; font-size:28px; animation: floatReverse 4.2s ease-in-out infinite;">🦇</div>

  <!-- Result Display -->
  <div id="result" style="margin-top:20px; font-size:32px; text-align:center;"></div>

  <!-- Hide and Seek Button -->
  <input type="button" value="かくれんぼ" id="hideButton" style="padding:10px 20px; font-size:20px; cursor:pointer; border:none; border-radius:5px; background-color:#ff69b4; color:white; box-shadow:0 4px #d63384; transition: transform 0.1s;">
</div>

<script>
document.getElementById('hideButton').addEventListener('click', function(){
    // Possible results
    const results = [
        {text: '遠い', emoji: '🐕', size: '24px'},
        {text: '少し遠い', emoji: '🐈', size: '28px'},
        {text: '真ん中', emoji: '🐇', size: '32px'},
        {text: '少し近い', emoji: '🦔', size: '36px'},
        {text: '近い', emoji: '🦝', size: '40px'},
        {text: 'タッチ🐾', emoji: '🦄', size: '44px'}
    ];
    const result = results[Math.floor(Math.random() * results.length)];
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = result.emoji + ' ' + result.text;
    resultDiv.style.fontSize = result.size;
    resultDiv.style.animation = 'bounce 0.5s';

    // Button Animation
    this.style.transform = 'scale(0.95)';
    setTimeout(() => {
        this.style.transform = 'scale(1)';
    }, 100);

    // Remove bounce after animation
    setTimeout(() => {
        resultDiv.style.animation = '';
    }, 500);
});
</script>
</body>
</html>
```