CSS Animations
Bring your web designs to life with powerful and performant CSS animations. Create engaging user experiences with just a few lines of code.
Interactive Particle System
This canvas animation is created with JavaScript, but similar effects can be achieved with CSS!
@keyframes
The foundation of CSS animations that defines the animation sequence with specific style changes at various points during the animation timeline.
animation-name
Specifies the name of the @keyframes rule that should be applied to the element.
animation-duration
Defines how long a complete animation cycle should take (e.g., 2s, 500ms).
animation-timing-function
Controls the pacing of the animation (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()).
animation-delay
Sets a time before the animation begins after it's applied to an element.
animation-iteration-count
Determines how many times the animation should play (a number or 'infinite').
animation-direction
Specifies whether the animation should play forward, reverse, or alternate directions.
animation-fill-mode
Defines what styles are applied before and after the animation executes.
animation-play-state
Allows pausing and resuming of the animation (running or paused).
Advanced CSS Animations
Complete HTML, CSS, and JavaScript code examples for stunning web animations
Hover Galaxy
Interactive galaxy that responds to mouse movement
Liquid Fill
Fluid animation that mimics liquid filling a container
Morphing Blob
Organic shape that continuously morphs between forms
Neon Pulse Card
Cyberpunk-style card with neon glow effects
Floating Particles
Animated particles floating in space
Loading Spinner 3D
3D rotating loader with multiple rings
Click "Copy Complete Code" to get HTML, CSS, and JavaScript files ready to use!
Try CSS Animations Yourself
Experiment with this sample code in our interactive editor. Modify the values to see how they affect the animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeoMotion Lab</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Chivo+Mono:wght@300;400;500&display=swap');
:root {
--neon-blue: #00d9ff;
--neon-pink: #ff2a6d;
--neon-purple: #8a2be2;
--neon-green: #39ff14;
--dark-bg: #0a0a16;
--dark-card: #13132b;
--glow-blue: 0 0 10px rgba(0, 217, 255, 0.7), 0 0 20px rgba(0, 217, 255, 0.4);
--glow-pink: 0 0 10px rgba(255, 42, 109, 0.7), 0 0 20px rgba(255, 42, 109, 0.4);
--glow-purple: 0 0 10px rgba(138, 43, 226, 0.7), 0 0 20px rgba(138, 43, 226, 0.4);
--glow-green: 0 0 10px rgba(57, 255, 20, 0.7), 0 0 20px rgba(57, 255, 20, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--dark-bg);
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}
.terminal-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
.terminal-header {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.terminal-header h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-purple));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: var(--glow-blue);
letter-spacing: 2px;
}
.terminal-header p {
font-size: 1.25rem;
opacity: 0.8;
max-width: 700px;
margin: 0 auto;
font-family: 'Chivo Mono', monospace;
}
.grid-system {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.specimen {
background: var(--dark-card);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.specimen::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-purple), var(--neon-green));
background-size: 400% 400%;
animation: gradient-border 8s ease infinite;
border-radius: 18px;
}
.specimen:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.specimen-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--neon-blue);
text-shadow: var(--glow-blue);
}
.specimen-desc {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1.5rem;
font-family: 'Chivo Mono', monospace;
line-height: 1.6;
}
.display-case {
height: 200px;
background: rgba(0, 0, 0, 0.3);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Quantum Orb */
.quantum-orb {
width: 80px;
height: 80px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, var(--neon-blue), var(--neon-purple));
box-shadow: var(--glow-blue), inset 0 0 20px rgba(0, 0, 0, 0.3);
position: relative;
animation: quantum-pulse 3s infinite ease-in-out;
}
.quantum-orb::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
filter: blur(4px);
}
.quantum-orb::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
border: 2px solid var(--neon-blue);
opacity: 0;
animation: quantum-ring 3s infinite ease-in-out;
}
@keyframes quantum-pulse {
0%, 100% { transform: scale(1) rotate(0deg); }
33% { transform: scale(1.1) rotate(120deg); }
66% { transform: scale(0.9) rotate(240deg); }
}
@keyframes quantum-ring {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
/* Holographic Grid */
.hologrid {
width: 100%;
height: 100%;
position: relative;
perspective: 1000px;
}
.grid-plane {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: grid-rotate 12s infinite linear;
}
.grid-line {
position: absolute;
background: rgba(0, 217, 255, 0.3);
box-shadow: var(--glow-blue);
}
.horizontal {
width: 100%;
height: 1px;
left: 0;
}
.vertical {
width: 1px;
height: 100%;
top: 0;
}
@keyframes grid-rotate {
0% { transform: rotateX(60deg) rotateZ(0deg); }
100% { transform: rotateX(60deg) rotateZ(360deg); }
}
/* Data Stream */
.datastream {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.data-bit {
position: absolute;
width: 4px;
height: 20px;
background: var(--neon-green);
box-shadow: var(--glow-green);
opacity: 0.8;
animation: data-fall 2s infinite linear;
}
@keyframes data-fall {
0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
5% { opacity: 1; }
95% { opacity: 0.8; }
100% { transform: translateY(200px) rotate(360deg); opacity: 0; }
}
/* Neon Sign */
.neon-sign {
font-family: 'Chivo Mono', monospace;
font-size: 2.5rem;
font-weight: 500;
color: transparent;
text-shadow: 0 0 8px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 21px var(--neon-pink), 0 0 42px var(--neon-pink);
animation: neon-flicker 4s infinite alternate;
position: relative;
}
.neon-sign::after {
content: 'OPEN';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--neon-pink);
opacity: 0.3;
filter: blur(15px);
}
@keyframes neon-flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow: 0 0 8px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 21px var(--neon-pink), 0 0 42px var(--neon-pink), 0 0 82px var(--neon-pink);
}
20%, 24%, 55% {
text-shadow: none;
}
}
/* Particle Field */
.particle-field {
width: 100%;
height: 100%;
position: relative;
}
.particle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--neon-purple);
box-shadow: var(--glow-purple);
animation: particle-float 8s infinite ease-in-out;
}
@keyframes particle-float {
0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
25% { transform: translate(40px, -30px) scale(1.5); opacity: 1; }
50% { transform: translate(0, -60px) scale(1); opacity: 0.7; }
75% { transform: translate(-40px, -30px) scale(1.8); opacity: 0.9; }
}
/* Cyber Circle */
.cyber-circle {
width: 100px;
height: 100px;
position: relative;
}
.circle-ring {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid transparent;
border-radius: 50%;
border-top: 3px solid var(--neon-blue);
animation: cyber-spin 2s infinite linear;
}
.circle-ring:nth-child(1) { animation-duration: 2s; border-top-color: var(--neon-blue); }
.circle-ring:nth-child(2) { animation-duration: 1.5s; border-top-color: var(--neon-pink); width: 80%; height: 80%; top: 10%; left: 10%; }
.circle-ring:nth-child(3) { animation-duration: 1s; border-top-color: var(--neon-green); width: 60%; height: 60%; top: 20%; left: 20%; }
@keyframes cyber-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Glitch Text */
.glitch-container {
position: relative;
}
.glitch-text {
font-family: 'Chivo Mono', monospace;
font-size: 2rem;
font-weight: 700;
color: white;
position: relative;
display: inline-block;
}
.glitch-text::before,
.glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.glitch-text::before {
animation: glitch-animation 2s infinite;
color: var(--neon-pink);
left: 2px;
clip: rect(44px, 450px, 56px, 0);
}
.glitch-text::after {
animation: glitch-animation 3s infinite;
color: var(--neon-blue);
left: -2px;
clip: rect(44px, 450px, 56px, 0);
}
@keyframes glitch-animation {
0% { clip: rect(42px, 9999px, 44px, 0); }
5% { clip: rect(12px, 9999px, 59px, 0); }
10% { clip: rect(48px, 9999px, 29px, 0); }
15% { clip: rect(42px, 9999px, 73px, 0); }
20% { clip: rect(63px, 9999px, 27px, 0); }
25% { clip: rect(34px, 9999px, 55px, 0); }
30% { clip: rect(86px, 9999px, 73px, 0); }
35% { clip: rect(20px, 9999px, 20px, 0); }
40% { clip: rect(26px, 9999px, 60px, 0); }
45% { clip: rect(25px, 9999px, 66px, 0); }
50% { clip: rect(57px, 9999px, 98px, 0); }
55% { clip: rect(5px, 9999px, 46px, 0); }
60% { clip: rect(82px, 9999px, 31px, 0); }
65% { clip: rect(54px, 9999px, 27px, 0); }
70% { clip: rect(28px, 9999px, 99px, 0); }
75% { clip: rect(45px, 9999px, 69px, 0); }
80% { clip: rect(23px, 9999px, 85px, 0); }
85% { clip: rect(54px, 9999px, 84px, 0); }
90% { clip: rect(45px, 9999px, 47px, 0); }
95% { clip: rect(24px, 9999px, 23px, 0); }
100% { clip: rect(32px, 9999px, 92px, 0); }
}
/* Liquid Blob */
.liquid-blob {
width: 120px;
height: 120px;
background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
animation: blob-morph 8s linear infinite;
box-shadow: var(--glow-blue), inset 0 0 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
position: relative;
}
.liquid-blob::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: rgba(255, 255, 255, 0.1);
transform: rotate(45deg);
animation: blob-shine 8s linear infinite;
}
@keyframes blob-morph {
0%, 100% { border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%; }
33% { border-radius: 42% 56% 72% 28% / 42% 56% 48% 72%; }
66% { border-radius: 72% 28% 48% 56% / 56% 72% 28% 42%; }
}
@keyframes blob-shine {
0% { transform: translateY(100%) rotate(45deg); }
100% { transform: translateY(-100%) rotate(45deg); }
}
/* Control Panel */
.command-center {
display: flex;
justify-content: center;
gap: 1.5rem;
margin: 3rem 0;
flex-wrap: wrap;
}
.command-btn {
background: var(--dark-card);
border: 1px solid var(--neon-blue);
color: var(--neon-blue);
padding: 0.875rem 1.75rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Chivo Mono', monospace;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
z-index: 1;
}
.command-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.2), transparent);
transition: 0.5s;
z-index: -1;
}
.command-btn:hover {
color: var(--dark-bg);
background: var(--neon-blue);
box-shadow: var(--glow-blue);
}
.command-btn:hover::before {
left: 100%;
}
/* Terminal Footer */
.terminal-footer {
text-align: center;
margin-top: 4rem;
opacity: 0.7;
font-family: 'Chivo Mono', monospace;
font-size: 0.9rem;
}
/* Responsive */
@media (max-width: 768px) {
.terminal-container { padding: 1.5rem; }
.grid-system {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.specimen { padding: 1.5rem; }
.display-case { height: 180px; }
}
/* Entrance Animation */
.specimen {
opacity: 0;
transform: translateY(30px) rotateX(15deg);
animation: terminal-entry 1s ease forwards;
}
.specimen:nth-child(1) { animation-delay: 0.1s; }
.specimen:nth-child(2) { animation-delay: 0.2s; }
.specimen:nth-child(3) { animation-delay: 0.3s; }
.specimen:nth-child(4) { animation-delay: 0.4s; }
.specimen:nth-child(5) { animation-delay: 0.5s; }
.specimen:nth-child(6) { animation-delay: 0.6s; }
.specimen:nth-child(7) { animation-delay: 0.7s; }
.specimen:nth-child(8) { animation-delay: 0.8s; }
@keyframes terminal-entry {
to {
opacity: 1;
transform: translateY(0) rotateX(0);
}
}
@keyframes gradient-border {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
</style>
</head>
<body>
<div class="terminal-container">
<div class="terminal-header">
<h1>CSS Animations</h1>
<p>EXPERIMENTAL CSS ANIMATION PLAYGROUND // V2.0</p>
</div>
<div class="command-center">
<button class="command-btn" onclick="freezeAll()">❄️ FREEZE ALL</button>
<button class="command-btn" onclick="activateAll()">⚡ ACTIVATE ALL</button>
<button class="command-btn" onclick="resetAll()">🔄 RESET SYSTEM</button>
</div>
<div class="grid-system">
<div class="specimen">
<h3 class="specimen-title">QUANTUM ORB</h3>
<p class="specimen-desc">Pulsating energy sphere with dynamic light effects</p>
<div class="display-case">
<div class="quantum-orb"></div>
</div>
</div>
<div class="specimen">
<h3 class="specimen-title">HOLO GRID</h3>
<p class="specimen-desc">3D grid matrix with infinite rotation sequence</p>
<div class="display-case">
<div class="hologrid">
<div class="grid-plane">
<!-- Grid lines will be generated by JS -->
</div>
</div>
</div>
</div>
<div class="specimen">
<h3 class="specimen-title">DATA STREAM</h3>
<p class="specimen-desc">Falling binary data visualization with glow effects</p>
<div class="display-case">
<div class="datastream">
<!-- Data bits will be generated by JS -->
</div>
</div>
</div>
<div class="specimen">
<h3 class="specimen-title">NEON SIGN</h3>
<p class="specimen-desc">Authentic neon tube simulation with flickering effect</p>
<div class="display-case">
<div class="neon-sign">OPEN</div>
</div>
</div>
<div class="specimen">
<h3 class="specimen-title">PARTICLE FIELD</h3>
<p class="specimen-desc">Floating particles with independent motion paths</p>
<div class="display-case">
<div class="particle-field">
<!-- Particles will be generated by JS -->
</div>
</div>
</div>
<div class="specimen">
<h3 class="specimen-title">CYBER CIRCLE</h3>
<p class="specimen-desc">Concentric rings with differential rotation speeds</p>
<div class="display-case">
<div class="cyber-circle">
<div class="circle-ring"></div>
<div class="circle-ring"></div>
<div class="circle-ring"></div>
</div>
</div>
</div>
<div class="specimen">
<h3 class="specimen-title">GLITCH TEXT</h3>
<p class="specimen-desc">Digital corruption effect with chromatic aberration</p>
<div class="display-case">
<div class="glitch-container">
<div class="glitch-text" data-text="SYSTEM">SYSTEM</div>
</div>
</div>
</div>
<div class="specimen">
<h3 class="specimen-title">LIQUID BLOB</h3>
<p class="specimen-desc">Morphing liquid shape with internal reflections</p>
<div class="display-case">
<div class="liquid-blob"></div>
</div>
</div>
</div>
<div class="terminal-footer">
<p>NEO-MOTION LABORATORIES // CSS EXPERIMENTATION PLATFORM</p>
</div>
</div>
<script>
// Generate grid lines for hologrid
function createHologrid() {
const gridPlane = document.querySelector('.grid-plane');
const size = 20; // Number of grid lines
// Clear existing grid
gridPlane.innerHTML = '';
// Create horizontal lines
for (let i = 0; i <= size; i++) {
const line = document.createElement('div');
line.className = 'grid-line horizontal';
line.style.top = i * (100 / size) + '%';
gridPlane.appendChild(line);
}
// Create vertical lines
for (let i = 0; i <= size; i++) {
const line = document.createElement('div');
line.className = 'grid-line vertical';
line.style.left = i * (100 / size) + '%';
gridPlane.appendChild(line);
}
}
// Generate data bits for datastream
function createDatastream() {
const datastream = document.querySelector('.datastream');
const bitCount = 15;
// Clear existing bits
datastream.innerHTML = '';
for (let i = 0; i < bitCount; i++) {
const bit = document.createElement('div');
bit.className = 'data-bit';
// Random horizontal position
const leftPos = Math.random() * 100;
bit.style.left = leftPos + '%';
// Random delay
const delay = Math.random() * 2;
bit.style.animationDelay = delay + 's';
datastream.appendChild(bit);
}
}
// Generate particles for particle field
function createParticles() {
const particleField = document.querySelector('.particle-field');
const particleCount = 12;
// Clear existing particles
particleField.innerHTML = '';
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
// Random position
const topPos = Math.random() * 100;
const leftPos = Math.random() * 100;
particle.style.top = topPos + '%';
particle.style.left = leftPos + '%';
// Random delay
const delay = Math.random() * 8;
particle.style.animationDelay = delay + 's';
particleField.appendChild(particle);
}
}
// Control functions
function freezeAll() {
document.querySelectorAll('*').forEach(element => {
element.style.animationPlayState = 'paused';
});
}
function activateAll() {
document.querySelectorAll('*').forEach(element => {
element.style.animationPlayState = 'running';
});
}
function resetAll() {
// Remove and re-add animation classes to restart
const animatedElements = document.querySelectorAll('[class*="quantum"], [class*="grid"], [class*="data"], [class*="neon"], [class*="particle"], [class*="circle"], [class*="glitch"], [class*="blob"]');
animatedElements.forEach(element => {
const originalClassName = element.className;
element.className = '';
setTimeout(() => {
element.className = originalClassName;
}, 10);
});
// Regenerate dynamic elements
createHologrid();
createDatastream();
createParticles();
}
// Initialize on load
document.addEventListener('DOMContentLoaded', function() {
createHologrid();
createDatastream();
createParticles();
// Add interactive effects to specimens
const specimens = document.querySelectorAll('.specimen');
specimens.forEach(specimen => {
specimen.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-12px) scale(1.03)';
this.style.zIndex = '10';
});
specimen.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(-8px) scale(1)';
this.style.zIndex = '1';
});
});
});
</script>
</body>
</html>Why Use CSS Animations?
⚡
Performance
CSS animations are handled by the browser's compositor thread, making them smoother than JavaScript animations for many use cases.
🎨
Simplicity
Create complex animations with just a few lines of code. No JavaScript knowledge required for basic animations.
📱
Responsive
CSS animations automatically adapt to different screen sizes and devices, ensuring consistent experiences across platforms.