طرق إعداد css iteration

تحدثنا عن CSS keyframes ، وجربنا مثالاً وفهمنا كيف تعمل لغة CSS مع نقل علامات html. في الدرس السابق ذكرنا وظيفة الرسوم المتحركة بشكل عام حيث أنها تحتوي على الرسوم المتحركة وعدد الثواني اللازمة لتلك الرسوم المتحركة كما يلي:

animation: moving 10s ;

لكن في بعض الأحيان نحتاج إلى التجريد أثناء استخدام وظيفة الرسوم المتحركة ، على سبيل المثال ، نريد تخصيص الرسوم المتحركة لعلامة html محددة ، أو على سبيل المثال ، نريد تحديد عدد الثواني في سطر مختلف ، نريد أيضًا تحديد العدد number للتوقف عن تكرار علامة HTML الخاصة بنا ، وهذا ما سنتحدث عنه في هذا الدرس.

تعريف

عندما نصل إلى عدد المرات التي يتم فيها تنفيذ الحركة ، فإننا نستخدم هذه الوظيفة:

animation-iteration-count:infinite;

ولجعل عدد الحركات محدودًا ، نعطي أي قيمة عددية على النحو التالي:

animation-iteration-count:5;

هنا قمنا بتعيين عدد محدود من الرسوم المتحركة وهو 5 دورات فقط وهذا ما يميز الوصول إلى وظائف الرسوم المتحركة في CSS لأن هذا يجعل من السهل فهم الكود الخاص بنا.

 

 

فوائد

هناك العديد من الفوائد لاستخدام مقياس سرعة الدوران بشكل منفصل ، بما في ذلك:

  • تخفيض وتنظيم أعداد الحركة إذا كان لدينا أكثر من وظيفة حركية.
  • تقليل موارد الذاكرة واستهلاك ذاكرة التخزين المؤقت للمتصفح مما يحافظ على سرعة صفحة الويب الخاصة بنا.

 

مثال

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

CSS

.first{
    width: 100px;
    height: 100px;

    background-color:#F00;
    margin:20px auto;
    margin-top:300px;
    position:absolute;


    animation-name: moving; /*This is type of keyframe*/
    animation-duration: 3s;

    /*Iteration*/
    animation-iteration-count:infinite; /*Number of iteration-count*/

}


/*Animation functions*/
@keyframes moving{
    0% , 100% {
        top:200px;
        left:200px;
    }

    25%{
        top:200px;
        left:100px;
    }

    50%{
        top:200px;
        left:100px;
    }

    75%{
        top:200px;
        left:100px;
    }

}

 

HTML

<!DOCTYPE html>

<html lang="en">

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

    <body>
        <div class="first">This is first</div>
    </body>

</html>

 

 

 

هل أعجبك المقال؟
 - 
Arabic
 - 
ar
Bengali
 - 
bn
German
 - 
de
English
 - 
en
French
 - 
fr
Hindi
 - 
hi
Indonesian
 - 
id
Portuguese
 - 
pt
Russian
 - 
ru
Spanish
 - 
es