تنسيق @keyframes لا يعمل لدي في CSS

Zen Eddin Allaham · 16 مايو

توجد مشكلة اخرة حيث ان @keyframes لا تعمل

Mustafa Suleiman · 16 مايو

خاصية content داخل @keyframes تعمل بشكل أساسي مع العناصر الزائفة pseudo-elements مثل ::before و ::after بالتالي عند تطبيقها مباشرة على عنصر label، فلن تغير محتواه النصي الفعلي.

ستحتاج إلى استخدام عنصر زائف ::after مع العنصر label، وتطبيق الأنيميشن عليه.

.typewriter-text {
    color: #6d8a6d; 
    font-weight: bold;
    margin-left: 5px;
}

.typewriter label::after { 
    content: ""; 
    animation: read 4s infinite; 

}

@keyframes read {
    0%, 20% {
        content: "Web Developer";
    }
    25%, 45% { 
        content: "Youtuber";
    }
    50%, 70% {
        content: "Developer";
    }
    75%, 95% {
        content: "Script writer";
    }
    100% {
        content: "Script writer";
    }
}

لو استمرت المشكلة أرفق المشروع لديك لتفقده

بلال زيادة · 17 مايو

لديك مشكلة تتعلق بكيفية تعريف واستخدام @keyframes لديك في الكود تعريف @keyframes read

@keyframes read {
    0%, 20% {
        content: 'web Developer';
    }
    50% {
        content: 'Youtuber';
    }
    75%, 100% {
        content: 'Developer';
    }
}

ثم تستخدمه في عنصر typewriter-label مع الخاصية:

.typewriter-label {
    animation: read 0.7s infinite;
}

المشكلة هنا هي أن الخاصية content لا يمكن استخدامها مباشرة مع @keyframes لتغيير النص بهذه الطريقة على عناصر عادية (مثل <span> أو عناصر أخرى). الخاصية content تُستخدم عادةً مع العناصر الزائفة (::before أو ::after) وليس مباشرة على العنصر نفسه. بالإضافة إلى ذلك، لا يمكن لـ @keyframes تغيير نصوص العنصر بهذه الطريقة مباشرة.

استخدام ::after مع content:

قم بتعديل الكود لاستخدام عنصر زائف مثل ::after لإضافة النص وتغييره باستخدام @keyframes.

.typewriter-label {
    position: relative;
    display: inline-block;
}

.typewriter-label::after {
    content: 'web Developer';
    animation: read 3s infinite;
}

@keyframes read {
    0%, 20% {
        content: 'web Developer';
    }
    50% {
        content: 'Youtuber';
    }
    75%, 100% {
        content: 'Developer';
    }
}

ثم تأكد من أن typewriter-label هو عنصر فارغ أو لا يحتوي على نص مباشر إذا كنت تستخدم ::after.

<span class="typewriter-label"></span>

Zen Eddin Allaham · 17 مايو

اريد ايضاً عند التمرير للأسفل يظهر الانميشن

بلال زيادة · 17 مايو

بتاريخ 1 دقيقة مضت قال Zen:

اريد ايضاً عند التمرير للأسفل يظهر الانميشن

لإضافة تأثير التمرير (scroll animation) بحيث يظهر الأنميشن عند التمرير للأسفل، يمكننا استخدام CSS مع خاصية الـ Intersection Observer API في JavaScript للكشف عن وقت ظهور العناصر في نطاق الرؤية (viewport).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amelia Kate</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #1a1a1a;
            color: white;
            font-family: Arial, sans-serif;
            height: 200vh; /* ارتفاع الصفحة للسماح بالتمرير */
        }

        header {
            padding: 20px;
            text-align: center;
        }

        header h1 {
            font-size: 2.5em;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }

        .typewriter {
            font-size: 3em;
            font-weight: bold;
            margin-left: 5px;
        }

        .typewriter-label {
            position: relative;
            display: inline-block;
            opacity: 0; /* مخفي في البداية */
            transform: translateY(20px); /* انتقال من الأسفل */
            transition: opacity 0.5s ease, transform 0.5s ease; /* تأثير انتقالي */
        }

        .typewriter-label.visible {
            opacity: 1; /* يظهر عند التمرير */
            transform: translateY(0);
        }

        .typewriter-label::after {
            content: 'web Developer';
            animation: read 3s infinite;
        }

        @keyframes read {
            0%, 20% {
                content: 'web Developer';
            }
            50% {
                content: 'Youtuber';
            }
            75%, 100% {
                content: 'Developer';
            }
        }

        p {
            margin: 20px 0;
            line-height: 1.6;
            opacity: 0; /* مخفي في البداية */
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        p.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .social-links {
            margin-top: 20px;
        }

        .social-links a {
            color: white;
            margin: 0 10px;
            text-decoration: none;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #8b008b;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 20px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .btn.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <header>
        <h1>Amelia Kate</h1>
    </header>
    <div class="container">
        <h2 class="typewriter">Hey I'm Amelia<br>I'm a <span class="typewriter-label"></span></h2>
        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Assumenda asperiores distinctio aperiam perferebdis? Dicta, distinctio esse error odio consectetur dignissimos numquam blanditiis non quos est magni voluptatem, ipsa, nostrum.</p>
        <div class="social-links">
            <a href="#">Instagram</a>
            <a href="#">Twitter</a>
            <a href="#">LinkedIn</a>
        </div>
        <a href="#" class="btn">Hire me</a>
    </div>

    <script>
        // استخدام Intersection Observer للكشف عن التمرير
        const elements = document.querySelectorAll('.typewriter-label, p, .btn');

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible'); // إضافة كلاس لتشغيل الأنميشن
                    observer.unobserve(entry.target); // إيقاف المراقبة بعد الظهور
                }
            });
        }, {
            threshold: 0.1 // يبدأ الأنميشن عندما يظهر 10% من العنصر
        });

        elements.forEach(element => {
            observer.observe(element); // مراقبة كل عنصر
        });
    </script>
</body>
</html>

عند تحميل الصفحة، تكون العناصر مخفية، عند التمرير للأسفل، ستظهر العناصر (النص والزر) بتأثير انتقالي ثم أنميشن تغيير النص (@keyframes read) سيبدأ تلقائيًا بمجرد أن يصبح typewriter-label مرئيًا.

تنسيق @keyframes لا يعمل لدي في CSS

السؤال

Zen Eddin Allaham

4 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

بلال زيادة

Zen Eddin Allaham

بلال زيادة

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية