AnimateItNow Code Playground

Write, Run, and Test your HTML, CSS & JavaScript in real time!

HTML

CSS

JavaScript

document.getElementById('animateBtn').addEventListener('click', function() {
    const box = document.querySelector('.box');
    box.classList.toggle('animated');
    
    // Add some fun effects
    if (box.classList.contains('animated')) {
        this.textContent = 'Reset';
        // Create particles
        createParticles();
    } else {
        this.textContent = 'Animate';
    }
});

function createParticles() {
    const container = document.querySelector('.container');
    for (let i = 0; i < 20; i++) {
        const particle = document.createElement('div');
        particle.style.position = 'absolute';
        particle.style.width = '10px';
        particle.style.height = '10px';
        particle.style.background = '#ff6584';
        particle.style.borderRadius = '50%';
        particle.style.left = Math.random() * 100 + '%';
        particle.style.top = Math.random() * 100 + '%';
        particle.style.animation = \`float \${Math.random() * 2 + 1}s ease-in-out infinite\`;
        container.appendChild(particle);
        
        // Remove particle after animation
        setTimeout(() => {
            particle.remove();
        }, 3000);
    }
}

// Add CSS for particle animation
const style = document.createElement('style');
style.textContent = `
@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 0.7; }
}
`;
document.head.appendChild(style);

Output Preview