<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial; padding: 30px; background: #1B3A5C; color: white; text-align: center; overflow: hidden; }

        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } }
        @keyframes fadeSlide { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes rainbow { 0% { color: #E84D3D; } 25% { color: #D4A533; } 50% { color: #27AE60; } 75% { color: #2E86AB; } 100% { color: #8E44AD; } }

        .pulse { display: inline-block; width: 80px; height: 80px; background: #E84D3D; border-radius: 50%; margin: 20px; animation: pulse 1.5s infinite; }
        .spin { display: inline-block; width: 80px; height: 80px; border: 5px solid transparent; border-top: 5px solid #D4A533; border-radius: 50%; margin: 20px; animation: spin 1s linear infinite; }
        .bounce { display: inline-block; width: 60px; height: 60px; background: #27AE60; border-radius: 12px; margin: 20px; animation: bounce 0.8s infinite; }
        .fade { animation: fadeSlide 1s ease-out; }
        .rainbow { font-size: 2.5rem; font-weight: 800; animation: rainbow 3s infinite; }
    </style>
</head>
<body>
    <h1 class="rainbow">CSS Animatsiyalar!</h1>
    <p class="fade">Bu matn silliq paydo bo'ldi</p>
    <div class="pulse"></div>
    <div class="spin"></div>
    <div class="bounce"></div>
</body>
</html>