```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
            40% {transform: translateY(-30px);} 
            60% {transform: translateY(-15px);}
        }
        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(5px); }
            50% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
            100% { transform: translateX(0); }
        }
        .button-animated { 
            animation: bounce 2s infinite; 
        }
        .button-shake {
            animation: shake 0.5s;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; text-align: center; overflow: hidden; border: 2px solid #000; border-radius: 10px;">
        <h2 style="font-size: 24px;">🎹 メジャースケール クイズ 🎵</h2>
        <div id="question" style="font-size: 24px; padding: 10px;">❓</div>
        <div>
            <input type="button" value="C" id="C" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="C#" id="C#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="D" id="D" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="D#" id="D#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="E" id="E" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="F" id="F" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="F#" id="F#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="G" id="G" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="G#" id="G#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="A" id="A" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="A#" id="A#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
            <input type="button" value="B" id="B" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
        </div>
        <input type="button" value="🎯 回答 🎯" id="submit" style="font-size: 24px; margin-top: 20px; margin-bottom: 10px; padding: 10px 20px;" onclick="checkAnswer()">
        <div id="result" style="font-size: 20px; padding: 10px;">🌟</div>
    </div>
    <script>
        const scales = {
            'C': ['C', 'D', 'E', 'F', 'G', 'A', 'B'],
            'C#': ['C#', 'D#', 'F', 'F#', 'G#', 'A#', 'C'],
            'D': ['D', 'E', 'F#', 'G', 'A', 'B', 'C#'],
            'D#': ['D#', 'F', 'G', 'G#', 'A#', 'C', 'D'],
            'E': ['E', 'F#', 'G#', 'A', 'B', 'C#', 'D#'],
            'F': ['F', 'G', 'A', 'A#', 'C', 'D', 'E'],
            'F#': ['F#', 'G#', 'A#', 'B', 'C#', 'D#', 'F'],
            'G': ['G', 'A', 'B', 'C', 'D', 'E', 'F#'],
            'G#': ['G#', 'A#', 'C', 'C#', 'D#', 'F', 'G'],
            'A': ['A', 'B', 'C#', 'D', 'E', 'F#', 'G#'],
            'A#': ['A#', 'C', 'D', 'D#', 'F', 'G', 'A'],
            'B': ['B', 'C#', 'D#', 'E', 'F#', 'G#', 'A#'],
        };

        let selectedQuestion;
        function newQuestion(){
            const keys = Object.keys(scales);
            selectedQuestion = keys[Math.floor(Math.random() * keys.length)];
            document.getElementById('question').innerText = `基音: ${selectedQuestion} 🎵`;
        }
        function toggleCheck(elm){
            elm.classList.toggle('button-shake');
        }
        function checkAnswer(){
            const correctAnswer = scales[selectedQuestion];
            let userAnswer = [];
            Object.keys(scales).forEach(key => {
                if(document.getElementById(key).classList.contains('button-shake')){
                    userAnswer.push(key);
                }
            });
            const resultMessage = (correctAnswer.length === userAnswer.length && correctAnswer.every(value => userAnswer.includes(value))) ? "🎉 正解です! 🎉" : "❌ 不正解 ❌";
            document.getElementById('result').innerText = resultMessage;
            newQuestion();
        }
        document.addEventListener("DOMContentLoaded", newQuestion);
    </script>
</body>
</html>
```