```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%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #ccc; padding: 10px; font-family: Arial, sans-serif;">
<div style="text-align: center; margin-bottom: 10px;">
<textarea id="textbox" style="width: 95%; height: 150px; font-size: 16px; padding: 10px;"></textarea>
</div>
<div style="text-align: center;">
<button onclick="removeLineBreaks()" style="margin: 5px; font-size: 18px; width: 100px; height: 50px; cursor: pointer;">
🧹<br>改行削除
</button>
<button onclick="copyToClipboard()" style="margin: 5px; font-size: 18px; width: 100px; height: 50px; cursor: pointer;">
📋<br>コピー
</button>
<button onclick="clearText()" style="margin: 5px; font-size: 18px; width: 100px; height: 50px; cursor: pointer;">
🗑️<br>削除
</button>
</div>
</div>
<script>
function removeLineBreaks() {
const textbox = document.getElementById('textbox');
textbox.value = textbox.value.replace(/\n/g, '');
animateButton(event.target, 'bounce');
}
function copyToClipboard() {
const textbox = document.getElementById('textbox');
textbox.select();
document.execCommand('copy');
animateButton(event.target, 'shake');
}
function clearText() {
const textbox = document.getElementById('textbox');
textbox.value = '';
animateButton(event.target, 'bounce');
}
function animateButton(button, animation) {
button.style.animation = `${animation} 0.5s`;
button.addEventListener('animationend', () => {
button.style.animation = '';
});
}
</script>
</body>
</html>
```
