PHP CSS Animation Playground & Code Generator
Build an interactive CSS animation playground where users tweak properties via sliders and PHP generates the final code.
PHPCSSAnimationCode GeneratorTool
Overview
Create an interactive playground for designing CSS animations. Users adjust easing, duration, transforms, and colors. PHP generates the final CSS code.
index.php
php
<?php
$duration = $_GET['dur'] ?? '1';
$easing = $_GET['ease'] ?? 'ease-in-out';
$transform = $_GET['tf'] ?? 'rotate(360deg)';
$color1 = $_GET['c1'] ?? '#6c63ff';
$color2 = $_GET['c2'] ?? '#ff6b6b';
$iteration = $_GET['iter'] ?? 'infinite';
$easings = ['ease','ease-in','ease-out','ease-in-out','linear','cubic-bezier(0.68,-0.55,0.27,1.55)'];
$transforms = ['rotate(360deg)', 'scale(1.5)', 'translateX(100px)', 'translateY(-50px)', 'skewX(20deg)', 'rotate(360deg) scale(0.5)'];
$generatedCSS = ".animated-box {\n width: 100px;\n height: 100px;\n background: linear-gradient(135deg, $color1, $color2);\n border-radius: 12px;\n animation: customAnim {$duration}s $easing $iteration;\n}\n\n@keyframes customAnim {\n 0% { transform: none; }\n 50% { transform: $transform; }\n 100% { transform: none; }\n}";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Playground</title>
<style>
body { background: #0a0a23; color: #fff; font-family: sans-serif; padding: 2rem; }
.layout { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; }
.controls { background: #1a1a3e; padding: 1.5rem; border-radius: 16px; }
.controls label { display: block; margin: 1rem 0 0.3rem; font-size: 0.9rem; opacity: 0.7; }
select, input { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #333; background: #2d2d5e; color: #fff; }
.preview-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.box-preview { width: 100px; height: 100px; border-radius: 12px; background: linear-gradient(135deg, <?= $color1 ?>, <?= $color2 ?>); animation: customAnim <?= $duration ?>s <?= $easing ?> <?= $iteration ?>; }
@keyframes customAnim { 0% { transform: none; } 50% { transform: <?= $transform ?>; } 100% { transform: none; } }
pre { background: #111; padding: 1.5rem; border-radius: 12px; font-size: 0.85rem; overflow-x: auto; max-width: 500px; width: 100%; }
button { padding: 10px 24px; background: #6c63ff; color: #fff; border: none; border-radius: 8px; cursor: pointer; margin-top: 1rem; }
</style>
</head>
<body>
<h1>������ CSS Animation Playground</h1>
<form class="layout" method="GET">
<div class="controls">
<label>Duration (seconds)</label>
<input type="range" name="dur" min="0.1" max="5" step="0.1" value="<?= $duration ?>" oninput="this.nextElementSibling.textContent=this.value+'s'"><span><?= $duration ?>s</span>
<label>Easing</label>
<select name="ease">
<?php foreach ($easings as $e): ?><option <?= $e===$easing?'selected':'' ?>><?= $e ?></option><?php endforeach; ?>
</select>
<label>Transform</label>
<select name="tf">
<?php foreach ($transforms as $t): ?><option <?= $t===$transform?'selected':'' ?>><?= $t ?></option><?php endforeach; ?>
</select>
<label>Color 1</label><input type="color" name="c1" value="<?= $color1 ?>">
<label>Color 2</label><input type="color" name="c2" value="<?= $color2 ?>">
<button type="submit">Apply</button>
</div>
<div class="preview-area">
<div class="box-preview"></div>
<pre><code><?= htmlspecialchars($generatedCSS) ?></code></pre>
<button type="button" onclick="navigator.clipboard.writeText(document.querySelector('code').textContent)">������ Copy CSS</button>
</div>
</form>
</body>
</html>Technologies
- PHP — dynamic CSS generation, parameter handling - CSS — keyframe animations, custom properties - JavaScript — clipboard, range slider interactivity
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!