KEYFRAME ANIMATION STUDIO

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let currentAnim = 'pulse';
    const elDur = document.getElementById('input-dur');
    const elEase = document.getElementById('select-ease');
    const styleTag = document.getElementById('dynamic-animation-style');
    const cssOut = document.getElementById('css-output');
    const toast = document.getElementById('toast');

    const KEYFRAMES = {
      pulse: `@keyframes custom-anim {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}`,
      bounce: `@keyframes custom-anim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}`,
      float: `@keyframes custom-anim {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
}`,
      glow: `@keyframes custom-anim {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 34, 0, 0.4); }
  50% { box-shadow: 0 0 40px rgba(255, 34, 0, 0.9); }
}`,
      flip: `@keyframes custom-anim {
  0% { transform: perspective(400px) rotateY(0deg); }
  100% { transform: perspective(400px) rotateY(360deg); }
}`,
      shake: `@keyframes custom-anim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}`
    };

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2000);
    }

    function updateAnimation() {
      const dur = elDur.value;
      const ease = elEase.value;
      document.getElementById('val-dur').textContent = dur + 's';

      const keyframes = KEYFRAMES[currentAnim] || KEYFRAMES.pulse;
      const fullCss = `${keyframes}\n\n.anim-target-box {\n  animation: custom-anim ${dur}s ${ease} infinite;\n}`;

      styleTag.textContent = `${keyframes}\n#target-box { animation: custom-anim ${dur}s ${ease} infinite; }`;
      cssOut.textContent = fullCss;
    }

    document.querySelectorAll('.btn-preset').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.btn-preset').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        currentAnim = btn.dataset.anim;
        updateAnimation();
      });
    });

    elDur.addEventListener('input', updateAnimation);
    elEase.addEventListener('change', updateAnimation);

    document.getElementById('btn-copy-css').addEventListener('click', () => {
      navigator.clipboard.writeText(cssOut.textContent);
      showToast('CSS Keyframes copied!');
    });

    updateAnimation();