WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Animation Container Example
695
byby.createsite
Open In Editor
Publish Your Code
Recommended
14 April 2023
Responsive CSS Navbar
24 August 2025
Simple HTML Registration Form Example
28 January 2024
Moving Card CSS Code
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #222; color: #eee; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } .el1 { position: absolute; width: 200px; height: 200px; background: #F8F8F2; border-radius: 50%; transform-origin: center; animation: pulse 2s infinite alternate; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .el2 { position: absolute; width: 150px; height: 150px; background: #272822; clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 50% 50%); transform-origin: center; animation: rotate-and-expand 4s infinite; animation-delay: 1s; } @keyframes rotate-and-expand { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(45deg) scale(1.2); } 50% { transform: rotate(90deg) scale(0.9); } 75% { transform: rotate(135deg) scale(1.1); } 100% { transform: rotate(180deg) scale(1); } } .el3 { position: absolute; width: 320px; height: 100px; background: linear-gradient(to right, #66D9EF, #16BDF8); border-radius: 10px; opacity: 0; animation: fade-in-out 3s infinite; animation-delay: 2s; } @keyframes fade-in-out { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */