Fade In
Entrada
CSS
.anim-box {
opacity: 0;
animation: fadeIn 1.5s ease infinite;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
Slide Up
Entrada
CSS
.anim-box {
animation: slideUp 1.5s ease infinite;
}
@keyframes slideUp {
0% { transform: translateY(80px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(-80px); opacity: 0; }
}
Slide Down
Entrada
CSS
.anim-box {
animation: slideDown 1.5s ease infinite;
}
@keyframes slideDown {
0% { transform: translateY(-80px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(80px); opacity: 0; }
}
Slide Left
Entrada
CSS
.anim-box {
animation: slideLeft 1.5s ease infinite;
}
@keyframes slideLeft {
0% { transform: translateX(120px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(-120px); opacity: 0; }
}
Slide Right
Entrada
CSS
.anim-box {
animation: slideRight 1.5s ease infinite;
}
@keyframes slideRight {
0% { transform: translateX(-120px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(120px); opacity: 0; }
}
Zoom In
Entrada
CSS
.anim-box {
animation: zoomIn 1.5s ease infinite;
}
@keyframes zoomIn {
0% { transform: scale(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(1.5); opacity: 0; }
}
Zoom Out
Entrada
CSS
.anim-box {
animation: zoomOut 1.5s ease infinite;
}
@keyframes zoomOut {
0% { transform: scale(2); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(0); opacity: 0; }
}
Rotate In
Entrada
CSS
.anim-box {
animation: rotateIn 1.5s ease infinite;
}
@keyframes rotateIn {
0% { transform: rotate(-360deg) scale(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: rotate(360deg) scale(1.2); opacity: 0; }
}
Flip Horizontal
Entrada
CSS
.anim-box {
animation: flipH 2s ease infinite;
perspective: 200px;
}
@keyframes flipH {
0% { transform: perspective(200px) rotateY(0); }
50% { transform: perspective(200px) rotateY(180deg); opacity: 0.7; }
100% { transform: perspective(200px) rotateY(360deg); }
}
Flip Vertical
Entrada
CSS
.anim-box {
animation: flipV 2s ease infinite;
perspective: 200px;
}
@keyframes flipV {
0% { transform: perspective(200px) rotateX(0); }
50% { transform: perspective(200px) rotateX(180deg); opacity: 0.7; }
100% { transform: perspective(200px) rotateX(360deg); }
}
Bounce In
Entrada
CSS
.anim-box {
animation: bounceIn 1.5s ease infinite;
}
@keyframes bounceIn {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.2); opacity: 1; }
70% { transform: scale(0.9); }
100% { transform: scale(0); opacity: 0; }
}
Elastic In
Entrada
CSS
.anim-box {
animation: elasticIn 2s ease infinite;
}
@keyframes elasticIn {
0% { transform: scale(0); opacity: 0; }
40% { transform: scale(1.3); opacity: 1; }
60% { transform: scale(0.8); }
80% { transform: scale(1.1); }
100% { transform: scale(0); opacity: 0; }
}
Blur In
Entrada
CSS
.anim-box {
animation: blurIn 1.5s ease infinite;
}
@keyframes blurIn {
0% { filter: blur(20px); opacity: 0; transform: scale(1.2); }
50% { filter: blur(0); opacity: 1; transform: scale(1); }
100% { filter: blur(20px); opacity: 0; transform: scale(0.8); }
}
Skew In
Entrada
CSS
.anim-box {
animation: skewIn 1.5s ease infinite;
}
@keyframes skewIn {
0% { transform: skew(30deg) translateX(-100px); opacity: 0; }
50% { transform: skew(0deg) translateX(0); opacity: 1; }
100% { transform: skew(-30deg) translateX(100px); opacity: 0; }
}
Fade + Scale
Entrada
CSS
.anim-box {
animation: fadeScale 1.5s ease infinite;
}
@keyframes fadeScale {
0% { opacity: 0; transform: scale(0.5); }
50% { opacity: 1; transform: scale(1.1); }
100% { opacity: 0; transform: scale(0.5); }
}
Float
Continuo
CSS
.anim-box {
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
Pulse
Continuo
CSS
.anim-box {
animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
Spin
Continuo
CSS
.anim-box {
animation: spin 2s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
Reverse Spin
Continuo
CSS
.anim-box {
animation: spinRev 2s linear infinite;
}
@keyframes spinRev {
100% { transform: rotate(-360deg); }
}
Wobble
Continuo
CSS
.anim-box {
animation: wobble 1.5s ease infinite;
}
@keyframes wobble {
0%, 100% { transform: translateX(0) rotate(0); }
25% { transform: translateX(-10px) rotate(-5deg); }
75% { transform: translateX(10px) rotate(5deg); }
}
Shake
Continuo
CSS
.anim-box {
animation: shake 0.5s ease infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
Sway
Continuo
CSS
.anim-box {
animation: sway 2s ease-in-out infinite;
}
@keyframes sway {
0%, 100% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
}
Heartbeat
Continuo
CSS
.anim-box {
animation: heartbeat 1s ease-in-out infinite;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
25% { transform: scale(1.15); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
}
Pendulum
Continuo
CSS
.anim-box {
animation: pendulum 2s ease-in-out infinite;
transform-origin: top center;
}
@keyframes pendulum {
0%, 100% { transform: rotate(30deg); }
50% { transform: rotate(-30deg); }
}
Bounce
Continuo
CSS
.anim-box {
animation: bounce 1s ease infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
Glitch
Continuo
CSS
.anim-box {
animation: glitch 0.8s steps(2) infinite;
}
@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-3px, 3px); }
40% { transform: translate(-3px, -3px); }
60% { transform: translate(3px, 3px); }
80% { transform: translate(3px, -3px); }
100% { transform: translate(0); }
}
Neon Flicker
Continuo
CSS
.anim-box {
animation: neonFlicker 1.5s steps(3) infinite;
box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 40px #0ff;
}
@keyframes neonFlicker {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
55% { opacity: 1; }
60% { opacity: 0.5; }
65% { opacity: 1; }
}
Elastic Band
Continuo
CSS
.anim-box {
animation: elasticBand 1.5s ease infinite;
}
@keyframes elasticBand {
0%, 100% { transform: scaleX(1) scaleY(1); }
20% { transform: scaleX(1.3) scaleY(0.7); }
40% { transform: scaleX(0.8) scaleY(1.2); }
60% { transform: scaleX(1.1) scaleY(0.9); }
80% { transform: scaleX(0.95) scaleY(1.05); }
}
Vibrate
Continuo
CSS
.anim-box {
animation: vibrate 0.3s linear infinite;
}
@keyframes vibrate {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}
Squash & Stretch
Continuo
CSS
.anim-box {
animation: squashStretch 1s ease infinite;
}
@keyframes squashStretch {
0%, 100% { transform: scaleX(1) scaleY(1); }
25% { transform: scaleX(0.7) scaleY(1.3); }
50% { transform: scaleX(1.3) scaleY(0.7); }
75% { transform: scaleX(0.85) scaleY(1.15); }
}
Jello
Continuo
CSS
.anim-box {
animation: jello 1.5s ease infinite;
}
@keyframes jello {
0%, 100% { transform: scale(1); }
30% { transform: translateX(-8px) skewX(-5deg) skewY(-5deg); }
40% { transform: translateX(6px) skewX(4deg) skewY(4deg); }
50% { transform: translateX(-5px) skewX(-3deg) skewY(3deg); }
60% { transform: translateX(4px) skewX(2deg) skewY(-2deg); }
70% { transform: translateX(-3px) skewX(-1deg) skewY(1deg); }
}
Rubber Band
Continuo
CSS
.anim-box {
animation: rubberBand 1.2s ease infinite;
}
@keyframes rubberBand {
0% { transform: scaleX(1); }
30% { transform: scaleX(1.25) scaleY(0.75); }
40% { transform: scaleX(0.75) scaleY(1.25); }
50% { transform: scaleX(1.15) scaleY(0.85); }
65% { transform: scaleX(0.95) scaleY(1.05); }
75% { transform: scaleX(1.05) scaleY(0.95); }
100% { transform: scaleX(1); }
}
Tada
Continuo
CSS
.anim-box {
animation: tada 1.2s ease infinite;
}
@keyframes tada {
0% { transform: scale(1) rotate(0); }
10%, 20% { transform: scale(0.9) rotate(-3deg); }
30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
100% { transform: scale(1) rotate(0); }
}
Light Speed In
Continuo
CSS
.anim-box {
animation: lightSpeed 1.5s ease infinite;
}
@keyframes lightSpeed {
0% { transform: translateX(200%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-10%) skewX(0deg); opacity: 1; }
80% { transform: translateX(0) skewX(-5deg); }
100% { transform: translateX(0) skewX(0); }
}
Hinge
Continuo
CSS
.anim-box {
animation: hinge 2s ease infinite;
transform-origin: top left;
}
@keyframes hinge {
0% { transform: rotate(0); }
20% { transform: rotate(90deg); }
40%, 60% { transform: rotate(90deg); }
80% { transform: rotate(0deg); opacity: 1; }
100% { transform: rotate(0deg); opacity: 0; }
}
Glow
Luces
CSS
.anim-box {
animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
0%, 100% { box-shadow: 0 0 5px #667eea, 0 0 10px #667eea; }
50% { box-shadow: 0 0 20px #667eea, 0 0 40px #764ba2, 0 0 60px #764ba2; }
}
Shadow Pulse
Luces
CSS
.anim-box {
animation: shadowPulse 1.5s ease-in-out infinite;
}
@keyframes shadowPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(102,126,234,0.5); }
50% { box-shadow: 0 0 0 15px rgba(102,126,234,0); }
}
Color Shift
Luces
CSS
.anim-box {
animation: colorShift 3s linear infinite;
}
@keyframes colorShift {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
}
Shimmer
Luces
CSS
.anim-box {
position: relative; overflow: hidden;
}
.anim-box::after {
content: '';
position: absolute; top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
100% { left: 100%; }
}
Gradient Flow
Luces
CSS
.anim-box {
background-size: 300% 300%;
animation: gradientFlow 3s ease infinite;
}
@keyframes gradientFlow {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Sparkle
Luces
CSS
.anim-box {
position: relative;
}
.anim-box::before, .anim-box::after {
content: '✦';
position: absolute; font-size: 16px; color: #ffd700;
animation: sparkle 1s ease infinite;
}
.anim-box::before { top: -10px; left: -10px; }
.anim-box::after { bottom: -10px; right: -10px; animation-delay: 0.5s; }
@keyframes sparkle {
0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
Rainbow Border
Luces
CSS
.anim-box {
border: 3px solid transparent;
border-radius: 12px;
background: linear-gradient(#1a1a2e, #1a1a2e) padding-box,
linear-gradient(90deg, #f093fb, #f5576c, #4facfe, #43e97b, #fa709a, #fee140) border-box;
background-size: 100% 100%, 400% 400%;
animation: rainbowBorder 3s linear infinite;
}
@keyframes rainbowBorder {
0% { background-position: 100% 100%, 0% 50%; }
100% { background-position: 100% 100%, 400% 50%; }
}
Neon Pulse
Luces
CSS
.anim-box {
border: 2px solid #0ff;
background: rgba(0,255,255,0.05);
animation: neonPulse 1.5s ease-in-out infinite;
}
@keyframes neonPulse {
0%, 100% { box-shadow: 0 0 5px #0ff, 0 0 10px #0ff; }
50% { box-shadow: 0 0 20px #0ff, 0 0 40px #0ff, 0 0 60px #0ff; }
}
Aurora
Luces
CSS
.anim-box {
background: linear-gradient(120deg, #00ff87, #60efff, #00e1ff, #7affc4);
background-size: 300% 300%;
animation: aurora 4s ease infinite;
}
@keyframes aurora {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
Star Burst
Luces
CSS
.anim-box {
animation: starBurst 1.5s ease infinite;
}
@keyframes starBurst {
0% { box-shadow: 0 0 0 0 rgba(255,215,0,0.6); }
50% { box-shadow: 0 0 0 20px rgba(255,215,0,0); }
75% { box-shadow: 0 0 0 10px rgba(255,215,0,0.3); }
100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
}
Laser Scan
Luces
CSS
.anim-box {
position: relative; overflow: hidden;
}
.anim-box::before {
content: '';
position: absolute; top: 0; left: 0;
width: 100%; height: 2px;
background: #ff0040;
box-shadow: 0 0 10px #ff0040, 0 0 20px #ff0040;
animation: laserScan 1.5s ease-in-out infinite;
}
@keyframes laserScan {
0% { top: 0; }
50% { top: 100%; }
100% { top: 0; }
}
Hologram
Luces
CSS
.anim-box {
animation: hologram 2s linear infinite;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,255,255,0.1) 2px,
rgba(0,255,255,0.1) 4px
);
}
@keyframes hologram {
0% { opacity: 0.6; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.02); }
100% { opacity: 0.6; transform: scaleY(1); }
}
Fire Glow
Luces
CSS
.anim-box {
animation: fireGlow 1s ease-in-out infinite alternate;
}
@keyframes fireGlow {
0% { box-shadow: 0 0 10px #ff4500, 0 0 20px #ff6347; }
100% { box-shadow: 0 0 20px #ff4500, 0 0 40px #ff6347, 0 0 60px #ff8c00; }
}
Ice Crystal
Luces
CSS
.anim-box {
animation: iceCrystal 2s ease infinite;
}
@keyframes iceCrystal {
0% { box-shadow: 0 0 5px rgba(173,216,230,0.5); filter: brightness(1); }
50% { box-shadow: 0 0 30px rgba(173,216,230,0.8), inset 0 0 15px rgba(255,255,255,0.5); filter: brightness(1.3); }
100% { box-shadow: 0 0 5px rgba(173,216,230,0.5); filter: brightness(1); }
}
Matrix Rain
Luces
CSS
.anim-box {
position: relative; overflow: hidden;
}
.anim-box::before {
content: '01';
position: absolute; top: 0; left: 0;
font-size: 10px; color: #0f0; font-family: monospace;
animation: matrixRain 1.5s steps(3) infinite;
}
@keyframes matrixRain {
0% { transform: translateY(-60px); opacity: 1; }
100% { transform: translateY(60px); opacity: 0; }
}
Particle Burst
Luces
CSS
.anim-box {
position: relative;
}
.anim-box::before, .anim-box::after, .anim-box span {
content: '';
position: absolute; width: 4px; height: 4px;
background: #f5576c; border-radius: 50%;
animation: particleBurst 1.5s ease infinite;
}
.anim-box::before { top: 30px; left: 30px; animation-delay: 0s; }
.anim-box::after { top: 30px; left: 30px; animation-delay: 0.3s; }
.anim-box span { top: 30px; left: 30px; animation-delay: 0.6s; }
@keyframes particleBurst {
0% { transform: translate(0,0) scale(1); opacity: 1; }
100% { transform: translate(var(--tx,20px), var(--ty,-20px)) scale(0); opacity: 0; }
}
Data Stream
Luces
CSS
.anim-box {
position: relative; overflow: hidden;
}
.anim-box::before {
content: '';
position: absolute; top: -100%; left: 0;
width: 100%; height: 50%;
background: linear-gradient(180deg, transparent, rgba(67,233,123,0.3), transparent);
animation: dataStream 2s linear infinite;
}
@keyframes dataStream {
100% { top: 200%; }
}
Warp Speed
Luces
CSS
.anim-box {
position: relative; overflow: hidden;
}
.anim-box::before {
content: '';
position: absolute; top: 50%; left: 50%;
width: 2px; height: 2px;
background: white;
box-shadow: 0 0 30px 15px white, 30px 0 60px 30px rgba(255,255,255,0.5),
-30px 0 60px 30px rgba(255,255,255,0.5), 0 30px 60px 30px rgba(255,255,255,0.3);
animation: warp 1s linear infinite;
border-radius: 50%;
}
@keyframes warp {
0% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: translate(-50%,-50%) scale(30); opacity: 0; }
}
Electric Arc
Luces
CSS
.anim-box {
animation: electricArc 0.3s steps(2) infinite;
filter: drop-shadow(0 0 8px #4facfe);
}
@keyframes electricArc {
0% { opacity: 1; transform: translate(0,0); }
25% { opacity: 0.5; transform: translate(-2px, 1px); }
50% { opacity: 1; transform: translate(2px, -1px); }
75% { opacity: 0.3; transform: translate(-1px, -2px); }
100% { opacity: 1; transform: translate(0,0); }
}
Photon Wave
Luces
CSS
.anim-box {
position: relative; overflow: hidden;
}
.anim-box::before {
content: '';
position: absolute; top: 0; left: -100%;
width: 200%; height: 100%;
background: repeating-linear-gradient(
90deg,
transparent, transparent 10px,
rgba(162,155,254,0.3) 10px, rgba(162,155,254,0.3) 20px
);
animation: photonWave 1s linear infinite;
}
@keyframes photonWave {
100% { transform: translateX(20px); }
}
Circle Morph
Geometría
CSS
.anim-box {
animation: circleMorph 3s ease infinite;
}
@keyframes circleMorph {
0% { border-radius: 50%; transform: rotate(0deg); }
25% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(90deg); }
50% { border-radius: 50%; transform: rotate(180deg); }
75% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; transform: rotate(270deg); }
100% { border-radius: 50%; transform: rotate(360deg); }
}
Square Spin
Geometría
CSS
.anim-box {
animation: squareSpin 3s ease infinite;
}
@keyframes squareSpin {
0% { transform: rotate(0deg) scale(1); border-radius: 0; }
25% { border-radius: 20%; }
50% { transform: rotate(180deg) scale(0.8); border-radius: 50%; }
75% { border-radius: 20%; }
100% { transform: rotate(360deg) scale(1); border-radius: 0; }
}
Triangle Rotate
Geometría
CSS
.anim-box {
width: 52px !important; height: 52px !important;
background: transparent !important;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-bottom: 45px solid #4facfe;
animation: triRotate 2s linear infinite;
filter: drop-shadow(0 0 5px rgba(79,172,254,0.5));
}
@keyframes triRotate {
100% { transform: rotate(360deg); }
}
Diamond Shuffle
Geometría
CSS
.anim-box {
animation: diamondShuffle 2s ease infinite;
}
@keyframes diamondShuffle {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(45deg) scale(1.1); }
50% { transform: rotate(90deg) scale(1); }
75% { transform: rotate(135deg) scale(0.9); }
100% { transform: rotate(180deg) scale(1); }
}
Hexagon Spin
Geometría
CSS
.anim-box {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
animation: hexSpin 3s linear infinite;
}
@keyframes hexSpin {
100% { transform: rotate(360deg); }
}
Star Burst Spin
Geometría
CSS
.anim-box {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
animation: starSpin 2s linear infinite;
}
@keyframes starSpin {
100% { transform: rotate(360deg); }
}
Morph Blob
Geometría
CSS
.anim-box {
animation: morphBlob 4s ease infinite;
}
@keyframes morphBlob {
0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
50% { border-radius: 50% 60% 30% 60% / 30% 50% 70% 50%; }
75% { border-radius: 60% 30% 60% 40% / 70% 40% 50% 60%; }
100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
Infinity Loop
Geometría
CSS
.anim-box {
width: 80px !important; height: 40px !important;
border: 4px solid #f5576c;
border-radius: 0;
animation: infinityLoop 2s ease infinite;
clip-path: none;
}
@keyframes infinityLoop {
0% { border-radius: 0; transform: rotate(0deg); }
50% { border-radius: 50%; transform: rotate(90deg); }
100% { border-radius: 0; transform: rotate(360deg); }
}
Polygon Dance
Geometría
CSS
.anim-box {
animation: polyDance 3s ease infinite;
}
@keyframes polyDance {
0% { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
33% { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
66% { clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 100%, 50% 90%, 20% 100%, 0% 70%, 0% 35%, 20% 10%); }
100% { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
}
Spiral
Geometría
CSS
.anim-box {
width: 10px !important; height: 10px !important;
border-radius: 50% !important;
background: #667eea;
animation: spiral 2s linear infinite;
box-shadow: 0 0 5px #667eea;
}
@keyframes spiral {
0% { transform: translate(25px, 25px) scale(0.5); opacity: 1; }
25% { transform: translate(45px, 25px) scale(0.8); opacity: 0.8; }
50% { transform: translate(25px, 45px) scale(1); opacity: 0.6; }
75% { transform: translate(5px, 25px) scale(0.8); opacity: 0.4; }
100% { transform: translate(25px, 25px) scale(0.5); opacity: 1; }
}
Orbit
Geometría
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
}
.anim-box::before {
content: '';
position: absolute; top: 50%; left: 50%;
width: 8px; height: 8px;
background: #f5576c; border-radius: 50%;
transform: translate(-50%,-50%);
animation: orbit 1.5s linear infinite;
}
@keyframes orbit {
0% { transform: translate(-50%,-50%) rotate(0deg) translateX(20px); }
100% { transform: translate(-50%,-50%) rotate(360deg) translateX(20px); }
}
Concentric Rings
Geometría
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
}
.anim-box::before, .anim-box::after {
content: '';
position: absolute; top: 50%; left: 50%;
border: 2px solid #4facfe;
border-radius: 50%;
transform: translate(-50%,-50%);
}
.anim-box::before {
width: 20px; height: 20px;
animation: ringPulse1 1.5s ease infinite;
}
.anim-box::after {
width: 40px; height: 40px;
animation: ringPulse2 1.5s ease infinite;
}
@keyframes ringPulse1 {
0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
50% { transform: translate(-50%,-50%) scale(1.5); opacity: 0.3; }
}
@keyframes ringPulse2 {
0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; }
50% { transform: translate(-50%,-50%) scale(1.3); opacity: 0.1; }
}
Wave Form
Geometría
CSS
.anim-box {
width: 60px !important; height: 60px !important;
background: transparent !important;
border: none !important;
display: flex; align-items: center; justify-content: center; gap: 3px;
}
.anim-box > i {
width: 4px; height: 20px;
background: linear-gradient(to top, #667eea, #764ba2);
border-radius: 2px;
animation: waveForm 1s ease-in-out infinite;
}
.anim-box > i:nth-child(1) { animation-delay: 0s; }
.anim-box > i:nth-child(2) { animation-delay: 0.1s; }
.anim-box > i:nth-child(3) { animation-delay: 0.2s; }
.anim-box > i:nth-child(4) { animation-delay: 0.3s; }
.anim-box > i:nth-child(5) { animation-delay: 0.4s; }
@keyframes waveForm {
0%, 100% { height: 8px; }
50% { height: 35px; }
}
Torus Spin
Geometría
CSS
.anim-box {
width: 60px !important; height: 60px !important;
border: 6px solid transparent;
border-top-color: #43e97b;
border-bottom-color: #38f9d7;
border-radius: 50%;
animation: torusSpin 2s linear infinite;
}
@keyframes torusSpin {
100% { transform: rotate(360deg); }
}
Nested Squares
Geometría
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
}
.anim-box::before, .anim-box::after {
content: '';
position: absolute; top: 50%; left: 50%;
border: 2px solid #fa709a;
transform: translate(-50%,-50%);
}
.anim-box::before {
width: 40px; height: 40px;
animation: nestedSpin1 2s linear infinite;
}
.anim-box::after {
width: 24px; height: 24px;
border-color: #fee140;
animation: nestedSpin2 1.5s linear infinite reverse;
}
@keyframes nestedSpin1 { 100% { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes nestedSpin2 { 100% { transform: translate(-50%,-50%) rotate(-360deg); } }
Fractal Zoom
Geometría
CSS
.anim-box {
animation: fractalZoom 3s ease infinite;
}
@keyframes fractalZoom {
0% { transform: scale(1) rotate(0deg); }
50% { transform: scale(0.5) rotate(180deg); }
100% { transform: scale(1) rotate(360deg); }
}
Möbius Strip
Geometría
CSS
.anim-box {
width: 80px !important; height: 40px !important;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 20px;
animation: mobius 3s ease infinite;
}
@keyframes mobius {
0% { transform: perspective(200px) rotateX(0deg) rotateY(0deg); }
50% { transform: perspective(200px) rotateX(180deg) rotateY(90deg); }
100% { transform: perspective(200px) rotateX(360deg) rotateY(180deg); }
}
Pixelate
Geometría
CSS
.anim-box {
animation: pixelate 2s steps(4) infinite;
}
@keyframes pixelate {
0% { clip-path: inset(0 round 0px); }
25% { clip-path: inset(10% round 2px); }
50% { clip-path: inset(20% round 4px); }
75% { clip-path: inset(10% round 2px); }
100% { clip-path: inset(0 round 0px); }
}
Origami Fold
Geometría
CSS
.anim-box {
animation: origami 2s ease infinite;
transform-origin: bottom right;
}
@keyframes origami {
0% { transform: perspective(200px) rotateX(0deg); }
50% { transform: perspective(200px) rotateX(-20deg) rotateY(10deg); }
100% { transform: perspective(200px) rotateX(0deg); }
}
Tessellation
Geometría
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
background: transparent !important;
}
.anim-box::before, .anim-box::after, .anim-box span {
content: '';
position: absolute;
background: #84fab0;
animation: tessSpin 3s linear infinite;
}
.anim-box::before {
width: 30px; height: 30px; top: 0; left: 0;
animation-delay: 0s;
}
.anim-box::after {
width: 30px; height: 30px; top: 0; right: 0;
background: #8fd3f4;
animation-delay: 0.5s;
}
.anim-box span {
width: 30px; height: 30px; bottom: 0; left: 15px;
background: #a6c1ee;
animation-delay: 1s;
}
@keyframes tessSpin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(0.7); }
100% { transform: rotate(360deg) scale(1); }
}
Typewriter
Texto
CSS
.anim-box {
font-family: 'Courier New', monospace;
font-size: 14px; font-weight: bold;
color: #38f9d7;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid #38f9d7;
animation: typewriter 2.5s steps(12) infinite, blink 0.5s step-end infinite;
width: 0;
}
@keyframes typewriter {
0% { width: 0; }
50%, 80% { width: 96px; }
100% { width: 0; }
}
@keyframes blink {
50% { border-color: transparent; }
}
Letter Bounce
Texto
CSS
.anim-box {
font-family: sans-serif; font-size: 12px; font-weight: bold;
color: #f5576c;
}
.anim-box span {
display: inline-block;
animation: letterBounce 0.8s ease infinite;
}
.anim-box span:nth-child(1) { animation-delay: 0s; }
.anim-box span:nth-child(2) { animation-delay: 0.1s; }
.anim-box span:nth-child(3) { animation-delay: 0.2s; }
.anim-box span:nth-child(4) { animation-delay: 0.3s; }
.anim-box span:nth-child(5) { animation-delay: 0.4s; }
@keyframes letterBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
Scramble
Texto
CSS
.anim-box {
font-family: monospace; font-size: 14px;
color: #0f0;
animation: scramble 2s steps(5) infinite;
}
@keyframes scramble {
0% { text-shadow: 0 0 5px #0f0; }
25% { text-shadow: 2px 0 #f00, -2px 0 #00f; }
50% { text-shadow: 0 0 10px #0f0; }
75% { text-shadow: -2px 0 #f00, 2px 0 #00f; }
100% { text-shadow: 0 0 5px #0f0; }
}
Glitch Text
Texto
CSS
.anim-box {
font-family: sans-serif; font-size: 14px; font-weight: bold;
color: white; position: relative;
animation: glitchText 0.8s steps(2) infinite;
}
@keyframes glitchText {
0% { text-shadow: 2px 0 #f00, -2px 0 #0ff; }
25% { text-shadow: -2px 0 #f00, 2px 0 #0ff; }
50% { text-shadow: 0 0 5px #fff; }
75% { text-shadow: 1px -1px #f00, -1px 1px #0ff; }
100% { text-shadow: 2px 0 #f00, -2px 0 #0ff; }
}
Neon Text
Texto
CSS
.anim-box {
font-family: sans-serif; font-size: 14px; font-weight: bold;
color: #f093fb;
text-shadow: 0 0 5px #f093fb, 0 0 10px #f093fb, 0 0 20px #f5576c, 0 0 40px #f5576c;
animation: neonText 2s ease-in-out infinite alternate;
}
@keyframes neonText {
0% { opacity: 0.8; }
100% { opacity: 1; text-shadow: 0 0 10px #f093fb, 0 0 20px #f093fb, 0 0 40px #f5576c, 0 0 80px #f5576c; }
}
Wave Text
Texto
CSS
.anim-box {
font-family: sans-serif; font-size: 12px; font-weight: bold;
color: #4facfe;
}
.anim-box span {
display: inline-block;
animation: waveText 1.2s ease infinite;
}
.anim-box span:nth-child(1) { animation-delay: 0s; }
.anim-box span:nth-child(2) { animation-delay: 0.15s; }
.anim-box span:nth-child(3) { animation-delay: 0.3s; }
.anim-box span:nth-child(4) { animation-delay: 0.45s; }
@keyframes waveText {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
Echo
Texto
CSS
.anim-box {
font-family: sans-serif; font-size: 14px; font-weight: bold;
color: #764ba2; position: relative;
}
.anim-box::before, .anim-box::after {
content: 'ECHO';
position: absolute; top: 0; left: 0;
}
.anim-box::before {
animation: echo1 2s ease infinite;
opacity: 0.4;
}
.anim-box::after {
animation: echo2 2s ease infinite;
opacity: 0.2;
}
@keyframes echo1 {
0% { transform: translate(0); }
100% { transform: translate(8px, -8px); }
}
@keyframes echo2 {
0% { transform: translate(0); }
100% { transform: translate(16px, -16px); }
}
Morph Text
Texto
CSS
.anim-box {
font-family: sans-serif; font-size: 12px; font-weight: bold;
color: #43e97b;
animation: morphText 3s ease infinite;
}
@keyframes morphText {
0%, 100% { letter-spacing: 0.2em; }
50% { letter-spacing: 0em; }
}
Rainbow Text
Texto
CSS
.anim-box {
font-family: sans-serif; font-size: 12px; font-weight: bold;
background: linear-gradient(90deg, #f093fb, #f5576c, #4facfe, #43e97b, #fa709a, #fee140);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: rainbowText 2s linear infinite;
}
@keyframes rainbowText {
100% { background-position: 200% center; }
}
Binary Count
Texto
CSS
.anim-box {
font-family: monospace; font-size: 10px;
color: #4facfe; line-height: 1.4;
animation: binaryCount 3s steps(4) infinite;
}
@keyframes binaryCount {
0% { opacity: 1; }
25% { opacity: 0.8; }
50% { opacity: 1; }
75% { opacity: 0.6; }
100% { opacity: 1; }
}
Loading Dots
Avanzado
CSS
.anim-box {
display: flex; gap: 6px; align-items: center; justify-content: center;
background: transparent !important; border: none !important;
}
.anim-box > i {
width: 10px; height: 10px;
background: #667eea; border-radius: 50%;
animation: loadDot 1.4s ease-in-out infinite;
}
.anim-box > i:nth-child(1) { animation-delay: 0s; }
.anim-box > i:nth-child(2) { animation-delay: 0.2s; }
.anim-box > i:nth-child(3) { animation-delay: 0.4s; }
@keyframes loadDot {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40% { transform: scale(1); opacity: 1; }
}
ProgressBar
Avanzado
CSS
.anim-box {
width: 60px !important; height: 12px !important;
background: rgba(255,255,255,0.1);
border-radius: 6px; overflow: hidden;
}
.anim-box::before {
content: '';
position: absolute; top: 0; left: 0;
height: 100%; width: 0%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 6px;
animation: progressBar 2s ease-in-out infinite;
}
@keyframes progressBar {
0% { width: 0%; }
50% { width: 100%; }
100% { width: 0%; }
}
Spinner Ring
Avanzado
CSS
.anim-box {
width: 60px !important; height: 60px !important;
border: 4px solid rgba(102,126,234,0.2);
border-top-color: #667eea;
border-radius: 50%;
animation: spinRing 1s linear infinite;
}
@keyframes spinRing {
100% { transform: rotate(360deg); }
}
Dual Spinner
Avanzado
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
}
.anim-box::before, .anim-box::after {
content: '';
position: absolute; top: 50%; left: 50%;
width: 40px; height: 40px;
border: 3px solid transparent;
border-radius: 50%;
transform: translate(-50%,-50%);
}
.anim-box::before {
border-top-color: #667eea;
animation: spinRing 1s linear infinite;
}
.anim-box::after {
border-bottom-color: #f5576c;
width: 28px; height: 28px;
animation: spinRing 0.7s linear infinite reverse;
}
DNA Helix
Avanzado
CSS
.anim-box {
position: relative; width: 30px !important; height: 60px !important;
background: transparent !important;
}
.anim-box::before, .anim-box::after {
content: '';
position: absolute; width: 8px; height: 8px;
border-radius: 50%;
}
.anim-box::before {
background: #667eea;
animation: dna1 1.5s ease-in-out infinite;
}
.anim-box::after {
background: #f5576c;
animation: dna2 1.5s ease-in-out infinite;
}
@keyframes dna1 {
0%, 100% { top: 0; left: 0; }
50% { top: 52px; left: 22px; }
}
@keyframes dna2 {
0%, 100% { top: 0; left: 22px; }
50% { top: 52px; left: 0; }
}
Ripple
Avanzado
CSS
.anim-box {
position: relative; overflow: hidden;
}
.anim-box::before, .anim-box::after {
content: '';
position: absolute; top: 50%; left: 50%;
width: 60px; height: 60px;
border: 2px solid rgba(255,255,255,0.5);
border-radius: 50%;
transform: translate(-50%,-50%) scale(0);
animation: ripple 2s ease-out infinite;
}
.anim-box::after { animation-delay: 1s; }
@keyframes ripple {
0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}
Morphing Loader
Avanzado
CSS
.anim-box {
animation: morphLoader 2s ease infinite;
}
@keyframes morphLoader {
0% { border-radius: 50%; transform: rotate(0deg); }
25% { border-radius: 0; transform: rotate(90deg); }
50% { border-radius: 50%; transform: rotate(180deg); }
75% { border-radius: 0; transform: rotate(270deg); }
100% { border-radius: 50%; transform: rotate(360deg); }
}
Quantum Spin
Avanzado
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
}
.anim-box::before, .anim-box::after {
content: '';
position: absolute; top: 50%; left: 50%;
width: 50px; height: 50px;
border: 2px solid;
border-radius: 50%;
transform: translate(-50%,-50%);
}
.anim-box::before {
border-color: #667eea transparent #667eea transparent;
animation: qSpin1 1.5s linear infinite;
}
.anim-box::after {
border-color: transparent #f5576c transparent #f5576c;
animation: qSpin2 1.5s linear infinite;
}
@keyframes qSpin1 {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes qSpin2 {
0% { transform: translate(-50%,-50%) rotate(90deg); }
100% { transform: translate(-50%,-50%) rotate(-360deg); }
}
Sine Wave
Avanzado
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
background: transparent !important; border: none !important;
display: flex; align-items: center; justify-content: center;
}
.anim-box > i {
width: 40px; height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
position: relative;
}
.anim-box > i::before, .anim-box > i::after {
content: '';
position: absolute; width: 8px; height: 8px;
background: #667eea; border-radius: 50%;
top: -3px;
}
.anim-box > i::before { left: 0; animation: sineDot1 1s ease infinite; }
.anim-box > i::after { right: 0; animation: sineDot2 1s ease infinite; }
@keyframes sineDot1 {
0%, 100% { top: -3px; }
50% { top: 5px; }
}
@keyframes sineDot2 {
0%, 100% { top: 5px; }
50% { top: -3px; }
}
Breathing
Avanzado
CSS
.anim-box {
animation: breathing 3s ease-in-out infinite;
}
@keyframes breathing {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(102,126,234,0.4); }
50% { transform: scale(1.1); box-shadow: 0 0 20px 5px rgba(102,126,234,0.2); }
}
Chaos
Avanzado
CSS
.anim-box {
animation: chaos 1s ease infinite;
}
@keyframes chaos {
0% { transform: translate(0,0) rotate(0deg) scale(1); }
10% { transform: translate(-5px, 3px) rotate(-10deg) scale(1.1); }
20% { transform: translate(5px, -3px) rotate(10deg) scale(0.9); }
30% { transform: translate(-3px, -5px) rotate(-5deg) scale(1.05); }
40% { transform: translate(3px, 5px) rotate(5deg) scale(0.95); }
50% { transform: translate(0,0) rotate(0deg) scale(1); }
60% { transform: translate(5px, -5px) rotate(15deg) scale(1.1); }
70% { transform: translate(-5px, 5px) rotate(-15deg) scale(0.9); }
80% { transform: translate(0,0) rotate(0deg) scale(1); }
90% { transform: translate(-2px, 2px) rotate(-5deg) scale(1.05); }
100% { transform: translate(0,0) rotate(0deg) scale(1); }
}
Portal
Avanzado
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
}
.anim-box::before, .anim-box::after {
content: '';
position: absolute; top: 50%; left: 50%;
border: 2px solid;
border-radius: 50%;
transform: translate(-50%,-50%);
}
.anim-box::before {
width: 50px; height: 50px;
border-color: #667eea;
animation: portal1 2s linear infinite;
}
.anim-box::after {
width: 30px; height: 30px;
border-color: #764ba2;
animation: portal2 1.5s linear infinite reverse;
}
@keyframes portal1 {
0% { transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 1; }
100% { transform: translate(-50%,-50%) rotate(360deg) scale(0.3); opacity: 0; }
}
@keyframes portal2 {
0% { transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 1; }
100% { transform: translate(-50%,-50%) rotate(-360deg) scale(0.3); opacity: 0; }
}
Void
Avanzado
CSS
.anim-box {
animation: void 2s ease infinite;
}
@keyframes void {
0% { transform: scale(1); filter: blur(0); }
50% { transform: scale(0.3); filter: blur(5px); }
100% { transform: scale(1); filter: blur(0); }
}
Phoenix
Avanzado
CSS
.anim-box {
animation: phoenix 2s ease infinite;
}
@keyframes phoenix {
0% { transform: scale(0.5) rotate(-10deg); opacity: 0; filter: brightness(2); }
30% { transform: scale(1.2) rotate(5deg); opacity: 1; filter: brightness(1.5); }
60% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
100% { transform: scale(0.5) rotate(10deg); opacity: 0; filter: brightness(2); }
}
Cosmic
Avanzado
CSS
.anim-box {
position: relative; width: 60px !important; height: 60px !important;
background: radial-gradient(circle, #667eea, #764ba2, #000);
border-radius: 50%;
animation: cosmic 4s ease infinite;
}
.anim-box::before {
content: '';
position: absolute; top: 10%; left: 10%;
width: 3px; height: 3px; background: white;
border-radius: 50%;
box-shadow: 12px 5px 0 1px white, 25px 15px 0 0.5px rgba(255,255,255,0.7),
8px 30px 0 1px white, 35px 25px 0 0.5px rgba(255,255,255,0.5),
20px 40px 0 1px white, 40px 5px 0 0.5px rgba(255,255,255,0.6);
animation: stars 3s linear infinite;
}
@keyframes cosmic {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(180deg); }
}
@keyframes stars {
100% { transform: rotate(360deg) translate(5px, 5px); }
}