keyframes delay : خصائص CSS

في هذا الدرس ، سوف نتعلم كيفية تأخير بدء الرسوم المتحركة في علامات HTML باستخدام CSS. ووظيفة keyframes delay بسيطة. حيث تحتوي على قيمة تمثل عدد الثواني لتأخير عملية الرسوم المتحركة ، تمامًا كما يلي:

animation-delay:2s;

إذا افترضنا أن لدينا علامتي HTML وأردنا تأخير بدء أحدهما ، فكل ما علينا فعله هو تحديد عدد الثواني في واحدة منهما حتى تبدأ العلامة الثانية قبلها.

 

مزايا keyframes delay

هناك بعض الخصائص التي تتمتع بها خاصية التأخير ، والتي يمكن أن تكون في:

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

 

مثال

من فضلك , قم بتطبيق المثال التالي في متصفحك. لكي يتسنى لك معرفة الشرح الأساسي لهذا الدرس:

CSS

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

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

    -webkit-animation-name:moving;
    animation-name: moving; /*This is for keyframe which is contains moving feature*/
    animation-duration: 5s;

    /*Iteration*/
    animation-iteration-count:infinite; /*Number of iteration-count we set no stop*/
    animation-direction:alternate; /*you can choose <normal> or <reverse> or <alternate> <alternate reverse>*/

    animation-delay:2s;

    animation-fill-mode: forwards;   /*forwards or backwards*/

}

.second{
    width: 250px;
    height: 100px;

    background-color:#C0B7C7;
    margin:20px auto;
    margin-top:300px;
    position:absolute;
    color:#FBFBFC;
    -webkit-animation-name:moving;
    animation-name: moving; /*This is for keyframe which is contains moving feature*/
    animation-duration: 5s;

    /*Iteration*/
    animation-iteration-count:infinite; /*Number of iteration-count we set no stop*/
    animation-direction:alternate; /*you can choose <normal> or <reverse> or <alternate> <alternate reverse>*/
    animation-delay:4s;
    animation-fill-mode: forwards ;


}


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

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

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

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

    0%{
        top:200px;
        left:200px;
        background-color:#83C6E7;
    }

}

HTML

<!DOCTYPE html>

<html lang="en">

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

    <body>
        <div class="first">First div</div>
        <div class="second">Second div</div>
    </body>

</html>

 

المراجع

  1. ^CSS animation-delay Property.
  2. ^دورة تعلم لغة HTML كاملة للمبتدئين.
هل أعجبك المقال؟

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.

 - 
Arabic
 - 
ar
Bengali
 - 
bn
German
 - 
de
English
 - 
en
French
 - 
fr
Hindi
 - 
hi
Indonesian
 - 
id
Portuguese
 - 
pt
Russian
 - 
ru
Spanish
 - 
es