كيفية استخدام keyframes في لغة css

keyframes في لغة css هي احدى الطرق التي تساعدنا في استخدام مؤثرات التصميم في صفحات الويب وعناصر لغة HTML.

وبالتالي تمنحنا لغة CSS معالجة بسيطة وأكثر روعة للإطارات الرئيسية ، والإطار هو مقدار الوقت اللازم لتحريك الرسومات على الشاشة مع الحفاظ على نفس الكفاءة ، في هذا الدرس سننقل علامة HTML عبر CSS.

حيث تمنحك keyframes في لغة css إدارة للحركات عبر نظام نسبي وتتبع , فهي تعمل على تبديل حالة الرسم خلال مدة التفعيل.

 

 

keyframes في لغة css

يتم ادراج حركة الإطارات عن طريق التغيير التدريجي للقيم , وينطبق ذلك على أنماط css المتعددة.[1] وبالتالي يتم تحديد حدوث تغيير النمط عن طريق النسبة المئوية والتي تقاس من 0% إلى 50% أو حتى 100%.[1]

 

div
{
  animation: moving 10s ;
}

@keyframes moving{

    0% {
          /*your code here*/
         }
    100% {
        /*your code here*/
    }
}

على سبيل المثال , توفر لك الوصول إلى ميزة الحركة في وظيفة الرسوم المتحركة ، متبوعة بعدد الثواني أو كسور الثواني التي نريد استمرار العرض فيها.

بالإضافة إلى مراحل تغيير العلامة التي يتم تعديلها في keyframes الحركية ، حيث تتجاوز النسبة بداية ونهاية المراحل من 0٪ إلى٪ 100.

 

فوائدها

لدى مفاتيح الإطارات في CSS فوائد عديدة يمكن تلخيصها في التالي:

  • تنسيق جميل ورائع للصفحة والمؤثرات , وبالتالي عودة الزائرين إلى صفحتنا.
  • تعمل بشكل مثالي مع لغة JavaScript.
  • القدرة على الاستخدام في الصور المصغرة مثل: أيقونة التحميل ، العد التنازلي ، إلخ..

عند التحكم بإعدادات HTML ستحصل على مؤثرات حركية جانبية للصفحات , مما يدعو إلى التعرف على خصائص العناصر واكتشاف المزيد من قدرات صفحة الويب.

ولربما تستطيع أيضًا دمج لغة جافاسكريبت في مؤثرات الصفحة لتبدي بذلك بعض الجوانب الرائعة في برمجة العناصر.

 

مثال

من فضلك ، لفهم keyframes في لغة css جيدًا ، انسخ الأكواد التالية وقم بتشغيلها في متصفحك.

CSS

div{
    width: 100px;
    height: 100px;
    color:#FFFFFF;
    text-align:center;
    background-color:#D9D9D9;


    position:absolute;



    animation: moving 10s ;
}


/*Animation functions*/
@keyframes moving{
    0% {
        top:0;
        left:0;
        background-color:#D9D9D9;
    }

    25%{
        top:0;
        left:1000px;
        background-color:#893E3E;
    }

    50%{
        top:200px;
        left:100px;
        background-color:#8CA7B6;
    }

    75%{
        top:200px;
        right:100px;
        background-color:#2C5B76;
    }

    100%{
        top:150px;
        right:75px;
        background-color:#70F3F8;
    }
}

 

HTML

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>  CSS Keyframes</title>
        <link rel='stylesheet' href='file.css' />
    </head>

    <body>
        <div>
            Welcome to CSS keyframe
        </div>
    </body>

</html>

لا يقف الأمر على حركة العناصر فحسب , على سبيل المثال , فقد نحتاج إلى تصغير وتكبير الخطوط وتغيير ألوانها أو ربما اضافة عناصر أخرى لم تكن موجودة من ذي قبل.

 

المراجع
  1. [1]^ CSS @keyframes Rule.
هل أعجبك المقال؟
 - 
Arabic
 - 
ar
Bengali
 - 
bn
German
 - 
de
English
 - 
en
French
 - 
fr
Hindi
 - 
hi
Indonesian
 - 
id
Portuguese
 - 
pt
Russian
 - 
ru
Spanish
 - 
es