شرح شامل لخاصية CSS Animation

1- animation-name

تحدد اسم الحركة المرتبط بـ @keyframes.

    div {
    animation-name: moveBox;
    }
            

2- animation-duration

تحدد مدة تشغيل الحركة (s أو ms).

    div {
    animation-duration: 2s;
    }
            

3- animation-delay

تحدد تأخير بدء الحركة.

    div {
    animation-delay: 1s;
    }
            

4- animation-iteration-count

عدد مرات التكرار (رقم أو infinite).

    div {
    animation-iteration-count: infinite;
    }
            

5- animation-direction

تحديد اتجاه الحركة.

• normal
• reverse
• alternate
• alternate-reverse

    div {
    animation-direction: alternate;
    }
            

6- animation-timing-function

تحديد سرعة الحركة.

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• cubic-bezier()

    div {
    animation-timing-function: ease-in-out;
    }
            

7- animation-fill-mode

تحديد حالة العنصر قبل/بعد انتهاء الحركة.

• none
• forwards
• backwards
• both

    div {
    animation-fill-mode: forwards;
    }
            

8- animation-play-state

تشغيل أو إيقاف الحركة.

    div {
    animation-play-state: paused;
    }
            

9- الخاصية المختصرة animation

تجمع جميع الخصائص في سطر واحد:

    div {
    animation: moveBox 2s ease-in-out 1s infinite alternate forwards;
    }
            

    .demo-box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: moveBox 3s ease-in-out 1s infinite alternate;
    }

    @keyframes moveBox {
    0%   { left: 0; top: 0; background: red; }
    50%  { left: 200px; top: 0; background: white; }
    100% { left: 200px; top: 200px; background: red; }
    }