📝言葉を複製しよう！🎉

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>楽しい複製アプリ🎉</title>
    <style>
        @keyframes pop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; text-align: center; border: 2px solid #333; border-radius: 10px; padding: 20px; background: #f9f9f9;">
        <h1 style="font-size: 24px;">📝言葉を複製しよう！🎉</h1>
        <input id="wordInput" type="text" placeholder="ここに言葉を入力" style="width: 80%; font-size: 18px; padding: 5px; border: 2px solid #333; border-radius: 5px; margin-bottom: 20px;">
        <div>
            <button onclick="duplicateWords(50)" style="width: 80%; font-size: 18px; padding: 10px; border: none; border-radius: 5px; background:#007bff; color: #fff; margin: 10px; animation: bounce 1s infinite;">50回複製🚀</button>
            <button onclick="duplicateWords(100)" style="width: 80%; font-size: 18px; padding: 10px; border: none; border-radius: 5px; background: #28a745; color: #fff; margin: 10px; animation: bounce 1s infinite;">100回複製🎈</button>
            <button onclick="duplicateWords(200)" style="width: 80%; font-size: 18px; padding: 10px; border: none; border-radius: 5px; background: #ffc107; color: #fff; margin: 10px; animation: bounce 1s infinite;">200回複製🎉</button>
        </div>
        <div id="result" style="overflow-y: scroll; height: 150px; margin-top: 20px; padding: 10px; border: 1px solid #333; background: #fff; border-radius: 5px;">
            <p>ここに複製した言葉が表示されます</p>
        </div>
    </div>

    <script>
        function duplicateWords(count) {
            const input = document.getElementById('wordInput').value;
            const result = document.getElementById('result');
            result.innerHTML = '';

            for (let i = 0; i < count; i++) {
                const span = document.createElement('span');
                span.textContent = input + ' ';
                span.style.animation = 'pop 0.5s ease-in';
                result.appendChild(span);
            }

            result.style.animation = 'shake 0.5s';
            result.style.animationIterationCount = 'infinite';

            setTimeout(() => {
                result.style.animation = '';
            }, 500);
        }

        const buttons = document.querySelectorAll('button');
        buttons.forEach(button => {
            button.addEventListener('click', function() {
                this.style.animation = 'pop 0.5s';
                setTimeout(() => {
                    this.style.animation = '';
                }, 500);
            });
        });
    </script>
</body>
</html>
```